1.自动刷新html #

1.1 可以使用inline参数 #

1.1.1 在package.json增加 #

"scripts": {
    "dev": "webpack-dev-server --inline"
},

1.1.2 在命令行下运行 #

$ npm run dev

1.2 修改webpack.config.js #

最好采用配置的方式，修改webpack.config.js

    port: 8080,//端口
    contentBase: 'build',//指定静态文件的根目录
+   inline:true,//实时刷新

2.自动产出html #

2.1 设置模板，新建index.html #

$ touch index.html

2.2 下载插件 #

$ npm install html-webpack-plugin --save-dev

2.3 修改webpack.config.js #

plugins:[
    new HtmlWebpackPlugin({
        title:'hello zf', //html的title
        template:'./index.html',//html引用的模板
        chunks:['entry1'] //需要引入的js
    })
]

3.自动打开浏览器 #

3.1 安装插件 #

npm install open-browser-webpack-plugin --save-dev

修改webpack.config.js

+ var openBrowserWebpackPlugin = require('open-browser-webpack-plugin');
+ plugin: [
+   new openBrowserWebpackPlugin({ url: 'http://localhost:8080' })
+ ]

4.将css打包成css文件 #

4.1 安装插件 #

$ npm install extract-text-webpack-plugin --save-dev

4.2 修改webpack.config.js #

+      var ExtractTextPlugin = require("extract-text-webpack-plugin");

+      {
+           test: /\.less/,
+           loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
+      },
+      {
+           test: /\.css/,
+           loader: ExtractTextPlugin.extract("style-loader", "css-loader")
+      }

        plugins: [
+        new ExtractTextPlugin("bundle.css"),
        ]

5.应用代码和第三方代码分离 #

5.1 引入webpack #

var webpack =  require('webpack');

5.2 修改webpack.config.js #

- entry: path.resolve(__dirname, 'src/index.js'),//入口文件
+ entry: {
+        index:path.resolve(__dirname, 'src/index.js'),
+        vendor: ['jquery','react'],
+    }
 output: {
        path: path.resolve(__dirname, 'build'),//输出路径
-        filename: 'bundle.js' //输出文件名
+        filename: '[name].js' //输出动态文件名
    },

+ new webpack.optimize.CommonsChunkPlugin('vendor', '2.js'),

生成2.js将原有的vendor留下，如果直接写2.js会产生三个文件会留下一个空vendor文件，需要把vendor在塞入到2.js

6.添加哈希值 #

6.1 修改webpack.config.js #

- filename: '[name].js' //输出文件名
+ filename: '[name].[hash:8].js' //输出文件名

7.压缩资源 #

7.1 修改webpack.config.js #

+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: false
+            }
+        }),
+        new webpack.optimize.MinChunkSizePlugin({
+            compress: {
+                warnings: false
+            }
+        }),
+        // 查找相等或近似的模块，避免在最终生成的文件中出现重复的模块
+        new webpack.optimize.DedupePlugin(),
+        // 按引用频度来排序 ID，以便达到减少文件大小的效果
+        new webpack.optimize.OccurenceOrderPlugin(),
+        new webpack.optimize.AggressiveMergingPlugin({
+            minSizeReduce: 1.5,
+            moveToParents: true
+        })

8.配置后台模拟端口 #

8.1 修改配置webpack.config.js #

+ function rewriteUrl(replacePath) {//重写url
+     return function (req, opt) {
+         var queryIndex = req.url.indexOf('?');//取得?所在的索引
+         var query = queryIndex >= 0 ? req.url.substr(queryIndex) : "";//取得查询字符串的内容
+         //把proxy的path替换为 '/$1\.json',$1取自path匹配到的真实路径中的第一个分组
+         req.url = req.path.replace(opt.path, replacePath) + query;
+     };
+ }

    devServer: {
+       proxy: [
+           {
+               path: /^\/api\/(.*)/,             //替换符合此正则的接口路径
+               target: "http://localhost:8080/", //目标域名端口
+               rewrite: rewriteUrl('/$1\.json'), //重新定向到新的地址,$1取自path正则匹配到的真实路径的第一个分组
+               changeOrigin: true                //修改来源地址
+           }
+       ]
    }

8.2 在build文件夹下增加book.json #

{"name":"zfpx","age":7}

8.3 访问此接口 #

http://localhost:8080/api/book

9.环境变量的区分 #

9.1 定义插件 #

var definePlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
  __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
});

9.2 配置环境变量 #

"publish-mac": "export NODE_ENV=prod && webpack-dev-server -p --progress --colors",
"publish-win": "set NODE_ENV=prod && webpack-dev-server -p --progress --colors"

9.3 区分环境 #

if (__DEV__) {
  console.warn('Extra logging');
}
// ...
if (__PRERELEASE__) {
  showSecretFeature();
}

10.暴露全局对象 #

10.1 安装插件 #

$ npm install expose-loader --save-dev

10.2 把jquery暴露到全局对象下面 #

+            {
+                test: /jquery.js$/,
+                loader: "expose?jQuery"
+            }

10.3 在html中使用 #

+ <script>
+     console.log($);
+ </script>

11.devtool增加调试 #

  module.exports = {
+    devtool: 'cheap-module-source-map'