webpack配置

　　webpack是強大的打包工具之一，利用模塊化解決方案將諸多模塊進行統一歸併，而後發佈上線。瀏覽器只是識別最基本的html、js、css文件，可是它本能識別相似於jsx、scss等一些其餘文件，因此此時使用webpack就能夠輕鬆處理這些問題，並且可以經過配置文件，將代碼進行壓縮，格式化，調試等處理，使得你的代碼可以安全的上線。因此，回到標題，配置是十分關鍵的，會用纔是前提。webpack能夠配置externals不打包庫使得打包後的文件變小。

1.安裝

　　webpack的安裝是經過npm的方式安裝，因此前提你必須安裝了node：

• 全局安裝：npm install -g webpack
• 局部安裝：npm install webpack --save-dev

2.webpack初始化

　　安裝好之後，須要進行一個初始化的過程：

1. npm init  初始化一個項目基礎，自動創建packjson文件
2. npm install webpack --save-dev  局部安裝開發依賴，至於這裏爲何使用--save-dev而不是使用--save的緣由是webpack是做爲開發時纔會使用到的依賴，因此不須要安裝到發佈的依賴中去；也許有人會問，我全局安裝了webpack，那麼局部需不須要安裝了，答案是須要的，由於項目中須要引入webpack的組件進行配置文件，並且假設你不須要webpack的某些依賴配置，別人想要在他的電腦上運行你的項目時，npm install後沒有裝webpack，恰好他的電腦上也沒有全局安裝，那麼就會出現打包失敗的狀況
3. 創建你所須要的js文件和html文件，通常會創建main.js做爲入口文件，index.html做爲初始頁面
4. 當這些步驟完成之後，就能夠開始打包了，假如你安裝好了全局的webpack，那麼在終端中輸入：webpack main.js build/bundle.js，使用局部的話：node_modules/.bin/webpack main.js build/bundle.js

3.webpack.config.js配置文件

　　webpack的兩大功能Loader和Plugins是它的招牌，均可以經過命令行的方式去啓動，可是若是都使用命令行去啓動的話會很是麻煩，因此此時配置文件就顯得很是重要了，由於配置好後只須要npm run start就能夠作到全部的事情了。在配置文件以前，先安裝webpack-dev-server(本地服務),接着須要配置package.json文件:

 (1)package.json文件配置

 1 {
 2   "name": "webtest",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1",
 8     "start": "webpack",
 9     "server": "webpack-dev-server --open",
10     "build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"
11   },
12   "author": "",
13   "license": "ISC",
14   "devDependencies": {
15     "babel-core": "^6.26.0",
16     "babel-loader": "^7.1.2",
17     "babel-plugin-react-transform": "^3.0.0",
18     "babel-preset-env": "^1.6.1",
19     "babel-preset-react": "^6.24.1",
20     "clean-webpack-plugin": "^0.1.17",
21     "css-loader": "^0.28.7",
22     "html-webpack-plugin": "^2.30.1",
23     "react-transform-hmr": "^1.0.4",
24     "sass-loader": "^6.0.6",
25     "webpack": "^3.10.0",
26     "webpack-dev-server": "^2.9.7"
27   },
28   "dependencies": {
29     "react": "^16.2.0",
30     "react-dom": "^16.2.0"
31   }
32 }

• start     webpack打包
• server  webpack啓動本地服務
• build     webpack打包成生產包
• devDependencies和dependencies裏邊是經過npm install xxx加載的一些經常使用項目依賴

(2)webpack.config.js

 1 const webpack = require('webpack');
 2 const HtmlWebpackPlugin = require('html-webpack-plugin');//局部熱加載插件
 3 
 4 module.exports = {
 5     devtool: 'source-map', //調試工具,開發中可使用eval-source-map,可是不適用於生產,最好使用source-map
 6     entry: __dirname + '/app/main.js', //入口文件,__dirname爲node命令,指代當前目錄
 7     output: {
 8         path: __dirname + '/build', //打包路徑
 9         filename: 'bundle.js' //打包後的文件名
10     },
11     devServer: { //須要安裝webpack-dev-server
12         contentBase: './build', //本地服務器所加載的頁面所在的目錄
13         port: '8088', //設置端口,默認爲8080
14         historyApiFallback: true, //開發SPA首選,依賴於HTML5 history API,true是全部跳轉指向index.html
15         inline: true, //實時刷新頁面
16         hot: true //局部熱加載，須要配合HotModuleReplacementPlugin
17     },
18     module: {
19         rules: [
20             {
21                 test: /(\.jsx|\.js)$/, //匹配處理文件的擴展名
22                 use: {
23                     loader: 'babel-loader', //loader名稱
24                     // options: { //將babel配置外置在文件.babelrc中,會自動識別
25                     //     presets: ['env','react']
26                     // }
27                 },
28                 exclude: /node_modules/, //屏蔽不須要處理的文件夾,include爲手動添加處理文件夾
29             },
30             {
31                 test: /(\.css|\.scss)$/,
32                 use: [ //同一個文件格式引入多個loader
33                     {
34                         loader: 'postcss-loader' //自動添加適應不一樣瀏覽器的css前綴,須要require('autoprefixer')
35                     },
36                     {
37                         loader: 'css-loader',
38                         options: {
39                             modules: true, //指定啓用css-loader
40                             localIdentName: '[name]__[local]--[hash:base64:5]' //指定css類名格式
41                         }
42                     },
43                     {
44                         loader: 'sass-loader'
45                     }
46                 ]
47             }
48         ]
49     },
50     plugins: [
51         new webpack.BannerPlugin('版權全部哦'),
52         new HtmlWebpackPlugin({ //基於模板基礎上,自動添加依賴文件
53             template: __dirname + '/app/index.tmpl.html'
54         }),
55         new webpack.HotModuleReplacementPlugin() //局部熱加載插件,配合babel-plugin-react-transform,react-transform-hmr
56     ]
57 }

　　以上配置文件中，基本的配置是不包含module和plugins的，而後經過npm run start就能夠webpack打包，經過npm run server就能夠經過入口文件啓動頁面，可是這個過程沒有生成打包文件。

　　Loader是webpack強大功能之一,實現對不一樣文件格式的處理,好比兼容瀏覽器使用ES6,ES7,React中將JSX文件轉爲JS文件等.經常使用Loader組件有babel-loader,css-loader,sass-loader,postcss-loader&autoprefixer，這些都是經過npm install xxx安裝的，功能如上所述。其中babel-loader能夠安裝註釋掉的那一部分配置，可是若是要加載其餘的功能，須要額外配置內容，此時通常創建一個.babelrc文件進行存儲內容，而且webpack會自動識別這個文件，只要你在module使用到babel-loader，下面是.babelrc配置文件：

 1 {
 2     "presets": ["env", "react"],
 3     "env": {
 4         "development": {
 5             "plugins": [
 6                 ["react-transform", {
 7                     "transforms": [{
 8                         "transform": "react-transform-hmr",
 9                         "imports": ["react"],
10                         "locals": ["module"]
11                     }]
12                 }]
13             ]
14         }
15     }
16 }

　　若是你使用到postcss-loader，那麼須要一個配置文件postcss.config.js：

1 module.exports = {
2     plugins: [
3         require('autoprefixer')
4     ]
5 }

　　Plugins是webpack強大功能之二,它不一樣於Loader是在整個構建過程當中都發揮做用,而Loader是對單個文件發揮做用。webpack.BannerPlugin是聲明版權的一個插件，效果是這樣的：

 

　　HtmlWebpackPlugin的功能很好用，經過參照一個index.tmpl.html的模板，自動生成index.html文件，並向其中添加必要的包，index.tmpl.html文件格式以下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>webpack</title>
 6 </head>
 7 <body>
 8     <div id="root"></div>
 9 </body>
10 </html>

(3)webpack.production.config.js生產配置文件

 1 const webpack = require('webpack');
 2 const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 
 4 module.exports = {
 5     devtool: 'null', //正式發佈,能夠取消
 6     entry: __dirname + '/app/main.js',
 7     output: {
 8         path: __dirname + '/build', 
 9         filename: 'bundle-[hash].js' //添加hash參數
10     },
11     devServer: {
12         contentBase: './build',
13         port: '8088',
14         historyApiFallback: true,
15         inline: true,
16         hot: true
17     },
18     module: {
19         rules: [
20             {
21                 test: /(\.jsx|\.js)$/,
22                 use: {
23                     loader: 'babel-loader',
24                 },
25                 exclude: /node_modules/,
26             },
27             {
28                 test: /(\.css|\.scss)$/,
29                 use: [
30                     {
31                         loader: 'postcss-loader'
32                     },
33                     {
34                         loader: 'css-loader',
35                     },
36                     {
37                         loader: 'sass-loader'
38                     }
39                 ]
40             }
41         ]
42     },
43     plugins: [
44         new webpack.BannerPlugin('版權全部哦'),
45         new HtmlWebpackPlugin({
46             template: __dirname + '/app/index.tmpl.html'
47         }),
48         new webpack.optimize.OccurrenceOrderPlugin(), //爲組件分配ID
49         new webpack.optimize.UglifyJsPlugin(), //壓縮js代碼
50         new CleanWebpackPlugin('build/*.*',{ //清理build殘餘文件
51             root: __dirname,
52             verbose: true,
53             dry: false
54         })
55     ]
56 }

　　基本的格式同webpack.config.js，可是這是生產發佈時用的，打包命令爲npm run build。注意到少配置了些東西和增長了幾個插件，都是正式生產發佈須要的，生產上儘量越小越好，服務器壓力小，就像react.js和react.min.js的區別同樣。