Webpack 配置中的一股清流

网络上不少文章真的是很糟糕鸡肉鸭肉乱炖，包括早期webpack官方的文档，一套完整的配置教程要看个半天，配置起来更是麻烦！本文使用webpack1,其实跟版本2没多大改变，可是某些插件会致使报错，使用当心。

Git: github.com/asd0102433/…
喜欢的朋友star支持一下，不断更新

第一步：建立 package

npm init -yes复制代码

第二步：下载wbepack, babel (注意webpack版本1，babel编译ES6,7等等)

babel
babel-preset-env 文档，一个帮你配置Babel的preset

npm install --save-dev babel-loader babel-core  babel-preset-env webpack@1复制代码

第三步：建立webpack.config.js, app.js 而后配置config

./webpack.config.js
./app/app.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复制代码

使用html-webpack-plugin

var HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + 'app/index.html', //指向你的index.html
      title: 'Fuck!',  //页面中经过<%= htmlWebpackPlugin.options.title %>使用 具体请看官方具体文档
    })
],复制代码

好了上面你就会在dist/index.html 查看到了。

第七步：还须要一个服务器

webpack-dev-server

$ 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有问题看看下面翻译的这篇文章吧
www.jianshu.com/p/941bfaf13…

react hot解决了上面的问题，实现了hot
github.com/gaearon/rea…

若是你没用react-hot 可使用 webpack-module-hot-accept

可是webpack2 仍是须要

---

若是你的css中字体路径失效看这里（我使用url-loader也遇到过）
stackoverflow.com/questions/3…

更多的xxx-loader,sass, img, font等你们本身去看文档吧，相对简单。

---

下面是我的以为不错的webapck优化

完全解决 Webpack 打包性能问题
webpack打包分析与性能优化
webpack 进阶
webpack2 英文
webpack2 中文
webpack2 入门