webpack2 項目

實例gif圖： 

 

目錄截圖:

 

目錄介紹：

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

c/:css文件夾;

i/:img文件夾;

j/:js文件夾;

src目錄下(開發目錄)：

c/:css文件夾;

l/:less文件夾;

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 啓動服務：

1 npm run webpack 2 npm run dev

栗子截圖：

 

最後就能夠打開 http://localhost:8080/ 實時更新了啦！

 

後記：

其實這裏面有個問題我沒有解決就是實時更新獨立的CSS文件 

由於我沒有style-loader 把CSS打包到js裏而是獨立出一個CSS文件(不要問我爲何不用,由於不喜歡)

因此我在改src/裏的css文件時 雖然webpack是檢測有文件更改 但由於更改css不在js裏

它就沒新刷瀏覽器,獨立的css也沒法熱更新,在網上找了好多文章也沒看到相似的問題~

 

參考資料：

webpack : http://webpack.github.io/

webpack中文指南 : http://webpackdoc.com/

愚人碼頭 : http://www.css88.com/archives/6992

qbaty : http://www.imooc.com/learn/802