webpack2 實踐

時間 2019-11-11

標籤 webpack2 webpack 實踐简体版

原文原文鏈接

實例gif圖： css

目錄截圖:html

目錄介紹：node

dist目錄(最後生成的目錄,裏面文件爲配置webpack自動生成的)：jquery

c/:css文件夾;webpack

i/:img文件夾;ios

j/:js文件夾;css3

c/:css文件夾;es6

l/:less文件夾;github

s/:sass文件夾;

i/:img文件夾;

j/:js文件夾;

教程開始

原始文件夾:

第一步
在CMD生成默認package.json文件：

1 npm init -y

栗子截圖:

第二步

在CMD安裝插件：

npm install   autoprefixer 
              babel-core babel-loader 
              babel-preset-es2015    
              css-loader 
              cssnano 
              extract-text-webpack-plugin 
              file-loader 
              html-webpack-plugin  
              img-loader  
              less 
              less-loader  
              node-sass  
              optimize-css-assets-webpack-plugin 
              postcss-loader  
              sass-loader 
              url-loader  
              webpack  
              webpack-dev-server   --save-dev

栗子截圖:(別一口氣把插件全寫上跑。。。。)

最終 package.json 文件：

 1 {
 2   "name": "webpack-demo",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1",
 8     "webpack": "webpack --config webpack.config.js --display-modules --progress -w -d --colors ",
 9     "dev": " webpack-dev-server --progress --inline --hot  --colors"
10   },
11   "keywords": [],
12   "author": "",
13   "license": "ISC",
14   "devDependencies": {
15     "autoprefixer": "^6.7.4",
16     "babel-core": "^6.23.1",
17     "babel-loader": "^6.3.2",
18     "babel-preset-es2015": "^6.22.0",
19     "css-loader": "^0.26.1",
20     "cssnano": "^3.10.0",
21     "extract-text-webpack-plugin": "^2.0.0-rc.3",
22     "file-loader": "^0.10.0",
23     "html-webpack-plugin": "^2.28.0",
24     "img-loader": "^1.3.1",
25     "less": "^2.7.2",
26     "less-loader": "^2.2.3",
27     "node-sass": "^4.5.0",
28     "optimize-css-assets-webpack-plugin": "^1.3.0",
29     "postcss-loader": "^1.3.1",
30     "sass-loader": "^6.0.1",
31     "url-loader": "^0.5.7",
32     "webpack": "^2.2.1",
33     "webpack-dev-server": "^2.4.1"
34   }
35 }

第三步

在根目錄建webpack.config.js 文件並編寫:

  1 'use strict';
  2 
  3 const webpack = require('webpack');  //webpack模塊;
  4 const path = require('path');         //node 路徑模塊;
  5 const ExtractTextPlugin = require("extract-text-webpack-plugin"); //獨立打包css模塊;
  6 const HtmlWebpackPlugin = require('html-webpack-plugin');          //html模板模塊;
  7 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //壓縮CSS模塊;
  8 
  9 module.exports = {
 10       context: path.resolve(__dirname, './src/j'),  //設置原始文件目錄;
 11       entry: {                                        //打包入口;
 12         app: './index.js',                            //打包js;
 13       },
 14       output: {                                        //打包出口;
 15           publicPath: "http://localhost:8080/",        //配合devServer本地Server;
 16         path: path.resolve(__dirname, './dist/'),    //出口地址;
 17         filename: 'j/[name].bundle.js',                //出口文件名;
 18       },    
 19       module: {                                        //模塊;
 20         rules: [                                    //原 webpack@1 裏 loaders;
 21             {
 22                 //正則匹配後綴.js文件;
 23                 test: /\.js$/,    
 24                 //須要排除的目錄        
 25                 exclude: '/node_modules/', 
 26                 //加載babel-loader轉譯es6
 27                 use: [{
 28                   loader: 'babel-loader',
 29                   //配置參數;
 30                   options: { presets: ['es2015',] }
 31                 }],
 32             },
 33             {
 34                 //正則匹配後綴.css文件;
 35                 test: /\.css$/,
 36                 //使用html-webpack-plugin插件獨立css到一個文件;
 37                 use: ExtractTextPlugin.extract({
 38                     //加載css-loader、postcss-loader（編譯順序從下往上）轉譯css
 39                       use: [
 40                           {
 41                               loader : 'css-loader?importLoaders=1',
 42 
 43                           },
 44                           {
 45                               loader : 'postcss-loader',
 46                               //配置參數;
 47                               options: {
 48                                   //從postcss插件autoprefixer 添加css3前綴;
 49                                 plugins: function() {
 50                                     return [
 51                                         //加載autoprefixer並配置前綴,可加載更多postcss插件;
 52                                         require('autoprefixer')({
 53                                             browsers: ['ios >= 7.0']
 54                                         })
 55                                     ];
 56                                 }
 57                             }
 58                           }
 59                       ]
 60                 })
 61             },
 62               {
 63                   //正則匹配後綴.sass、.scss文件;
 64                 test: /\.(sass|scss)$/,
 65                 //使用html-webpack-plugin插件獨立css到一個文件;
 66                 use: ExtractTextPlugin.extract({
 67                       use: [
 68                           {
 69                               loader : 'css-loader?importLoaders=1',
 70                           },
 71                           {
 72                               loader : 'postcss-loader',
 73                               //配置參數;
 74                               options: {
 75                                 plugins: function() {
 76                                     return [
 77                                         require('autoprefixer')({
 78                                             browsers: ['ios >= 7.0']
 79                                         })
 80                                     ];
 81                                 }
 82                             }
 83                           },
 84                           {
 85                               //加載sass-loader同時也得安裝node-sass;
 86                             loader: "sass-loader",
 87                             //配置參數;
 88                             options: {
 89                                 //sass的sourceMap
 90                                 sourceMap:true,
 91                                 //輸出css的格式兩個經常使用選項:compact({}行), compressed(壓縮一行)
 92                                 outputStyle : 'compact'
 93                             }
 94                         }
 95                       ]
 96                 })
 97             },
 98             {
 99                 //正則匹配後綴.less文件;
100                 test: /\.less$/,
101                 //使用html-webpack-plugin插件獨立css到一個文件;
102                 use: ExtractTextPlugin.extract({
103                       use: [
104                           {
105                               loader : 'css-loader?importLoaders=1',
106                           },
107                           {
108                               loader : 'postcss-loader',
109                               //配置參數;
110                               options: {
111                                 plugins: function() {
112                                     return [
113                                         require('autoprefixer')({
114                                             browsers: ['ios >= 7.0']
115                                         })
116                                     ];
117                                 }
118                             }
119                           },
120                           //加載less-loader同時也得安裝less;
121                         "less-loader"
122                       ]
123                 })
124             },
125             {
126                 //正則匹配後綴.png、.jpg、.gif圖片文件;
127                 test: /\.(png|jpg|gif)$/i,
128                 use: [
129                     {
130                         //加載url-loader 同時安裝 file-loader;
131                         loader : 'url-loader',
132                         options : {
133                             //小於10000K的圖片文件轉base64到css裏,固然css文件體積更大;
134                             limit : 10000,
135                             //設置最終img路徑;
136                             name : '/i/[name]-[hash].[ext]'
137                         }
138                     },
139                     {
140                         //壓縮圖片(另外一個壓縮圖片：image-webpack-loader);
141                         loader : 'img-loader?minimize&optimizationLevel=5&progressive=true'
142                     },
143                     
144                 ]
145             }
146         ]
147       },
148       plugins: [                                    //插件;
149           //模板插件
150           new HtmlWebpackPlugin({
151               filename: 'index.html',                    //設置最後生成文件名稱;
152               template: __dirname+'/src/index.html'   //設置原文件;
153           }),
154           //獨立打包css插件;
155         new ExtractTextPlugin({
156             filename : 'c/styles.css'                //設置最後css路徑、名稱;
157         }),
158         //壓縮css（注:由於沒有用style-loader打包到js裏因此webpack.optimize.UglifyJsPlugin的壓縮自己對獨立css無論用）;
159         new OptimizeCssAssetsPlugin({
160           assetNameRegExp: /\.css$/g,                //正則匹配後綴.css文件;
161           cssProcessor: require('cssnano'),            //加載‘cssnano’css優化插件;
162           cssProcessorOptions: { discardComments: {removeAll: true } }, //插件設置,刪除全部註釋;
163           canPrint: true                             //設置是否能夠向控制檯打日誌,默認爲true;
164         }),
165         //webpack內置js壓縮插件;
166         new webpack.optimize.UglifyJsPlugin({
167             compress: {                               //壓縮;
168               warnings: false                      //關閉警告;
169             }
170         }),
171         //webpack內置自動加載插件配合resolve.alias作全局插件;
172         new webpack.ProvidePlugin({
173             $: 'jquery'                              //文件裏碰見‘$’加載jquery;
174         })
175       ],    
176       devServer: {    //設置本地Server;
177         contentBase: path.join(__dirname,'dist'),  //設置啓動文件目錄;
178         port: 8080,      //設置端口號；
179         compress: true, //設置gzip壓縮;
180         //inline:true,  //開啓更新客戶端入口(可在package.json scripts 裏設置 npm run xxx);
181         //hot: true    //設置熱更新(可在package.json scripts 裏設置 npm run xxx);
182       },
183       resolve:{
184           //設置可省略文件後綴名(注:若是有文件沒有後綴設置‘’會在編譯時會報錯,必須改爲' '中間加個空格。ps:雖然看起來很強大但有時候省略後綴真不知道加載是啥啊~);
185           extensions: [' ','.css','.scss','.sass','.less','.js','.json'],
186           //查找module的話從這裏開始查找;
187         modules: [path.resolve(__dirname, "src"), "node_modules"], //絕對路徑;
188         //別名設置,主要是爲了配和webpack.ProvidePlugin設置全局插件;
189           alias: {
190               //設置全局jquery插件;
191             jquery: path.resolve(__dirname,'./src/j/jquery.min.js') //絕對路徑;
192         }
193       }
194 };

第四步

在index.js 入口js文件引入須要打包文件（真實項目裏也不太可能less\sass\css 三個混着寫,示例而已）:

第五步

webpack 經常使用命令

 1 webpack 最基本的啓動webpack命令
 2 webpack -w 提供watch方法，實時進行打包更新
 3 webpack -p 對打包後的文件進行壓縮
 4 webpack -d 提供SourceMaps，方便調試
 5 webpack --colors 輸出結果帶彩色，好比：會用紅色顯示耗時較長的步驟
 6 webpack --profile 輸出性能數據，能夠看到每一步的耗時
 7 webpack --display-modules 默認狀況下 node_modules 下的模塊會被隱藏，加上這個參數能夠顯示這些被隱藏的模塊
 8 webpack --progress 顯示編譯進度
 9 webpack-dev-server --inline 開啓更新客戶端入口
10 webpack-dev-server --hot 開啓熱更新

老寫那麼長的命令四不四撒因此在package.json 編寫 npm scripts 集成命令：

1 "webpack": "webpack --config webpack.config.js --display-modules --progress -w -d --colors ",
2 "dev": " webpack-dev-server --progress --inline --hot  --colors"

栗子截圖：

第六步

CMD跑 npm run webpack 完成以後在跑 npm run dev 啓動服務：