http://www.tuicool.com/articles/rYzuquJ网络上很多文章真的是很糟糕鸡肉鸭肉乱炖,包括早期webpack官方的文档,一套完整的配置教程要看个半天,配置起来更是麻烦!本文使用webpack1,其实跟版本2没多大改变,但是某些插件会导致报错,使用小心。
Git: https://github.com/asd0102433/blog
喜欢的朋友star支持一下,不断更新
第一步:创建 package
npm init -yes
第二步:下载wbepack, babel (注意webpack版本1,babel编译ES6,7等等)
babel-preset-env 文档,一个帮你配置Babel的preset
npm install --save-dev babel-loader babel-core babel-preset-env webpack@1
第三步:创建webpack.config.js配置config
./webpack.config.js
module.exports = {
entry: { // 编译入口配置
app: './app/app.js' // app/app.js 入口文件
},
output: { // 编译后输出配置
path: __dirname + '/dist', //__dirname指当前目录,生成./dist文件
filename: '[name].build.js',
publicPath: '/' // 资源路径,如:css的背景图片等路径
},
};
然后在package.json中找到scripts添加
"start": "webpack --config webpack.config.js"
第四部:启动命令
$ npm start
好了,./dist/app.build.js 你可以看到了,编译成功。
第五步:使用babel编译js
# 对es6的支持
$ npm install babel-preset-es2015 --save-dev
# 如果你想用es7的功能
$ npm install babel-preset-stage-0 --save-dev
添加module到config
...
output:{..},
module: {
loaders: [
{
test: /\.js$/, //如果jsx 就jsx
exclude: /node_modules/, //禁止编译node_modules文件
loader: 'babel-loader', //babel-loder
query: {
presets: ['es2015', 'stage-0', 'env'] //babel-preset-env
}
}
]
},
...
好了,你的项目可以使用import, se6, es7等特性了。
第六步:创建html
创建html在你的 ./app/index.html
$ npm install html-webpack-plugin --save-dev
var HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
template: __dirname + 'app/index.html', //指向你的index.html
title: 'Fuck!', //页面中通过<%= htmlWebpackPlugin.options.title %>使用 具体请看官方具体文档
})
],
好了上面你就会在dist/index.html 查看到了。
第七步:还需要一个服务器
$ npm install webpack-dev-server@1.16.3 --save-dev
注意如果使用webpack1的版本,dev-server不能是2的版本不然会报错。
添加devServer 到config里面,服务端口9000
devServer: {
contentBase: __dirname + 'dist',
compress: true,
port: 9000
}
$ webpack-dev-server --hot --inline
[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.
你可以在在package.json 修改成这样
"build": "webpack --config webpack.config.js",
"start": "webpack-dev-server --hot --inline --config webpack.config.js NODE_ENV=development"
你就可以通过, 构建项目的命令了。
$ npm start
$ npm build
命令添加 NODE_ENV=development
来给项目添加开发环境
到这就差不多可以跑通了,更多的细节大家还是去看git上面比较好的项目配置。一般找一些react的项目看看就可以了。
你更新文件就会自动刷新页面,但是是强刷。(难玩这东西)
如果你对dev-server有问题看看下面翻译的这篇文章吧
http://www.jianshu.com/p/941bfaf13be1react hot解决了上面的问题,实现了hot
https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md如果你没用react-hot 可以使用 webpack-module-hot-accept
但是webpack2 还是需要
如果你的css中字体路径失效看这里(我使用url-loader也遇到过)
http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts/34133809#34133809更多的xxx-loader,sass, img, font等大家自己去看文档吧,相对简单。
下面是个人觉得不错的webapck优化