Webpack 配置中的一股清流

凹凸卿發表於2017-03-19
Web

網路上很多文章真的是很糟糕雞肉鴨肉亂燉，包括早期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 入門

相關文章