<强> 1 webpack简介
webpack是目前最流行的打包工具之一,是一个为前端模块打包构建而生的工具,它既吸取了大量已有的方案优点和教训,也解决了很多前端开发过程中已有的痛点,如代码的拆分与异步加载,对非js资源的支持,强大的装载机设计使得它更像是一个构建平台,而不是打包工具。
<强> 2 webpack反应开发环境
1)新建一个项目文件夹,进入此文件夹,创建包。json文件(npm init命令)
2)确认已安装webpack, web pack-dev-server模块
3)安装巴别塔(巴别塔不懂的请先看https://www.jb51.net/article/142362.htm)巴别塔的目的有两个(将es6转为es5,转换jsx语法),
4)安装babel-preset-es2015和babel-preset-react
5)安装babel-loader和babel-core
6)巴别塔工作需要.babelrc文件
｛
“预设”:【“反应”、“es2015”】
}
7)最重要的webpack.config.js文件的配置
var=路径要求(“路径”);
var webpack=要求(“webpack”);
var HtmlwebpackPlugin=要求(“html-webpack-plugin”);
var ROOT_PATH=path.resolve (__dirname);
var BUILD_PATH=路径。解决(ROOT_PATH,“构建”);
var APP_PATH=路径。解决(ROOT_PATH,“应用程序”);
模块。出口={
条目:{
应用:路径。解决(APP_PATH app.js)
},
输出:{
路径:BUILD_PATH,
文件名:“[名字].bundle.js”
},
解决:{
扩展:[",' . js ', ' .jsx '],
根:APP_PATH
},
模块:{
加载器:(
｛
测试:/\ . js # 63;美元/,
加载器:[' babel-loader '),
包括:APP_PATH
}
]
},
插件:[
新HtmlwebpackPlugin ({
标题:“演示”,
文件名:“index . html”
}），
]
}
之前
这个应该是最简单的配置了,不懂的可以网上搜,其中用到<代码> HtmlwebpackPlugin ,
这个插件是帮我们自动生成html页面,并自动引入打包后的js文件,其中的参数意思是,标题这个页面的标题、文件名生成的页面名字
8)最后的项目文件目录为
应用程序是项目组件文件夹,测试是测试文件
list.js代码
从“反应”进口的反应;
进口uuid uuid的;
从“. ./列/列”导入列;
类列表延伸反应。组件{
构造函数(道具){
超级(道具);
这一点。状态={
项目:[]
}
}
handleclick () {
常量值=https://www.yisu.com/zixun/this.refs.addlist.value;
const str={
id: uuid.v1 (),
文本:值
}
让项目=this.state.items;
项=[…项目,str];//合并数的值
this.setState ({
项目
}）
}//删除其中的
deleteItem (id) {
this.setState ({
项目:this.state.items.filter (
结果=>结果。id !==id
），
});
}
呈现(){
const ListIt=this.state.items。地图(=>{项
回报(
<列键={项目。id}名称={项}>
从“反应”进口的反应;
类列延伸反应。组件{
呈现(){
const文本=this.props.name;
回报(
李> & lt;
从“反应”进口的反应;
从“进口ReactDOM react-dom ';
从“导入列表。//列表”;
const应用=document.createElement (div);
document.body.appendChild(应用);
ReactDOM.render (& lt;列表/祝辞,应用);
之前
9)最后的package.json文件
｛
“名称”:“csdndemo”,
“版本”:“1.0.0”,
“描述”:“”,
“主要”:“index.js”,
"脚本":{
“开发”:“webpack-dev-server——热”
},
“作者”:“”,
“许可证”:“ISC”,
" devDependencies ": {
:“babel-core ^ 6.24.0”,
:“babel-loader ^ 6.4.1”,
:“babel-preset-es2015 ^ 6.24.0”,
:“babel-preset-react ^ 6.23.0”,
:“html-webpack-plugin ^ 2.28.0”,
“反应”:“^ 15.4.2”,
:“react-dom ^ 15.4.2”,
:“webpack ^ 1.14.0”,
:“webpack-dev-server ^ 1.14.1”
}
}
