輕松配置Webpack · 我的前端之路

在學習react的時候經常遇到別人所說的webpack，出于好奇我花費了半天的時間學習了一下它，不得不說webpack很強大，很適用于實際開發。 ###webpack和gulp webpack和gulp相似，可以取代一部分gulp的操作（壓縮/合并/編譯文件等），gulp的配置文件是gulpfile.js，而webpack的配置文件是webpack.config.js。本人比較喜歡gulp的管道編寫方式，但是webpack編寫起來也不麻煩，而且支持CommonJS的書寫方式。 ###安裝webpack 你需要全局安裝webpack和它的服務端webpack-dev-server ~~~ npm install webpack -g npm install webpack-dev-server -g ~~~ ###使用webpack 就像gulp一樣，你需要一個配置文件（配置文件不是必須的，webpack允許直接在控制臺操作，但是會很麻煩）。下面通過幾個例子來說明如何使用webpack ####一、ES6轉ES5 第一個例子是將es6轉化成es5，新建wp-es6-5文件夾安裝插件 ~~~ npm install babel-core babel-preset-es2015 --save-dev npm install babel-loader --save-dev //webpack的bable加載器 ~~~ 下面來配置webpack.config.js ~~~ module.exports={ entry:"./main.js", //webpack的入口文件 output:{ path:"./bin", //指定入口文件編譯后輸出的路徑 filename:"app.js" //指定入口文件編譯后輸出的文件名 }, module:{ loaders:[{ //loaders是一個數組，由若干個對象組成，每個對象就是一個操作 test:/\.js$/, //對js文件生效 exclude:/node_modules/, //操作不包括node_modules文件夾 loader:"babel-loader", //使用babel加載器，為了書寫方便也可以把-loader去掉 query:{ presets:["es2015"] //執行babel的es2015轉換規則 } }] } } ~~~ 寫一下入口文件吧 ~~~ //main.js class MyClass{ constructor(x,y){ this.x=x; this.y=y; } print(){ return `(${this.x},${this.y})`; } } var myclass=new MyClass(2,3); console.log(myclass.print()); ~~~ 下面打開命令行，進入到當前文件夾下（wp-es6-5），運行webpack ![](https://box.kancloud.cn/3edac68c8d41c28d116f8a57205261ed_372x98.JPG) 此時你會發現多了一個bin文件夾，里面含有一個app.js，說明webpack已經成功地將main.js轉換成了es5并保存在了bin文件夾下面的app.js中。我們可以看一下app.js中的內容 ~~~ //部分代碼 var MyClass = function () { function MyClass(x, y) { _classCallCheck(this, MyClass); this.x = x; this.y = y; } _createClass(MyClass, [{ key: "print", value: function print() { return "(" + this.x + "," + this.y + ")"; } }]); return MyClass; }(); var myclass = new MyClass(2, 3); console.log(myclass.print()); ~~~ 不得不說webpack添加了很多其他的代碼，但是es6的確轉換成了es5。我們在根目錄下新建一個index.html ~~~ <html> <body> <script src="bin/app.js"></script> </body> </html> ~~~ 在瀏覽器端運行index.html，在控制臺里可以看到正確地運行結構`(2,3)` 我們也可以將webpack更加人性化一些，比如顯示進度條或者實時監聽，只需要運行webpack時加上后續指令 ~~~ webpack --progress //編譯時顯示進度條 webpack --colors //增加配色 webpack --watch //實時監聽 webpack --progress --colors --watch //整合以上功能 ~~~ ####二、CSS模塊加載 webpack的模塊加載機制不止適用于js，css/image均可以通過require加載。新建wp-css文件夾安裝插件 ~~~ npm install style-loader --save-dev npm install css-loader --svae-dev ~~~ 配置webpack.config.js ~~~ module.exports={ entry:"./main.js", output:{ path:__dirname+"/bin",//__dirname代表當前webpack.config.js所在的路徑 filename:"app.js" }, module:{ loaders:[{ test:/\.css$/, exclude:/node_modules/, loader:"style!css"//多個加載器通過字符串的形式以!分離 }] } } ~~~ 為了體現webpack對CommonJS的支持，我新建了export.js導出模塊，入口文件main.js引入它 ~~~ //exports.js var obj={name:"SunnyChuan",age:21}; module.exports=obj; ~~~ ~~~ //style.css body { background-color: #68b1ed; } ~~~ ~~~ //main.js require("!style!css!./style.css"); var obj=require("./export.js"); doucment.body.innerHTML=obj.name+" "+obj.age; ~~~ 和例子一相同，我們需要一個index.html文件引入app.js，在瀏覽器中運行 ![](https://box.kancloud.cn/4aad91356e64d8f75a467bd1e9a225e1_430x223.JPG) ####三、React+ES6 安裝react和所需插件，既然目前react流行es6的書寫，那就把es6轉es5所需插件也安裝上 ~~~ npm install react --save-dev npm install react-dom --save-dev npm install babel-core --save-dev npm install babel-preset-es2015 --save-dev npm install babel-preset-react //將jsx語法轉換成正常js的規則 npm install babel-loader ~~~ 配置webpack.config.js ~~~ module.exports={ entry:"./main.js", output:{ path:__dirname+"/bin", filename:"app.js" }, module:{ loaders:[{ test:/\.js$/, exclude:/node_modules/, loader:"babel", query:{ presets:["es2015","react"] //執行babel的es2015和react轉換規則 } }] } } ~~~ 用react書寫入口文件 ~~~ //main.js import React from 'react'; //現在可以用es6寫react了 import ReactDOM from 'react-dom'; var MyComponent=React.createClass({ render:function(){ return (<div>Hello,SunnyChuan</div>); } }); ReactDOM.render(<MyComponent/>,document.getElementById("ss")); ~~~ ~~~  <html> <body> <div id="ss"></div> <script src="bin/app.js"></script> </body> </html> ~~~ 運行webpack后打開index.html ![](https://box.kancloud.cn/090261319c145f63b5f6c728a46a953c_369x184.JPG) ####四、UglifyJs插件 webpack自帶了一些插件，通過模塊導入后可以直接使用配置webpack.config.js ~~~ var webpack = require("webpack");//UglifyJs是webpack自帶的插件，因此無需自己安裝 var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin; //獲取uglifyJS插件 module.exports = { entry: "./main.js", output: { path: "./bin", filename: "app.js" }, plugins: [ new uglifyJsPlugin({ //plugins是一個數組，每一個成員都是一個插件，只需要require相應插件并添加到該數組中完成相應的配置即可 compress: { warnings: false } }) ] } ~~~ 我在入口文件中寫了一個數組去重函數 ~~~ var func=function(arr){ var temp=[]; for(var i =0;i<arr.length;i++){ if(temp.indexOf(arr[i])==-1)temp.push(arr[i]); } return temp; } console.log(func([1,1,2,2,3,3])); ~~~ 運行webpack后打開bin文件夾下的app.js，代碼的確壓縮了，但也得不可讀了 ~~~ !function(r){function n(e){if(o[e])return o[e].exports;var t=o[e]={exports:{},id:e,loaded:!1};return r[e].call(t.exports,t,t.exports,n),t.loaded=!0,t.exports}var o={};return n.m=r,n.c=o,n.p="",n(0)}([function(r,n){var o=function(r){for(var n=[],o=0;o<r.length;o++)n.indexOf(r[o])==-1&&n.push(r[o]);return n};console.log(o([1,1,2,2,3,3]))}]); ~~~ 在bin文件夾下使用node運行app.js`node app`，顯示的結果是`[1,2,3]`，說明代碼壓縮成功 ####HTML插件和OpenBrowser插件 HTML插件用于自動生成index.html，OpenBrowser則是自動打開index.html。與UglifyJs不同的是，這兩個插件都不是webpack自帶的插件，因此需要npm安裝。 npm安裝的插件名稱需要在官網的[list of plugins](http://webpack.github.io/docs/list-of-plugins.html)中找到自己要用到的插件，然后將該插件的駝峰命名法轉化為小寫并且單詞見用“-”鏈接即可。比如官網中的HtmlWebpackPlugin對應著html-webpack-plugin ~~~ npm install html-webpack-plugin --save-dev npm open-browser-webpack-plugin --save-dev ~~~ 配置webpack.config.js ~~~ var HtmlwebpackPlugin = require('html-webpack-plugin'); //引入相應的插件，注意寫法上和webpack自帶插件的區別 var OpenBrowserPlugin = require('open-browser-webpack-plugin'); module.exports = { entry: './main.js', //在本例中不需要自己的js文件，但是入口文件是必須的，因此需要新建一個入口文件，里面可以什么都不寫 output: { path: __dirname, filename: 'app.js' }, plugins: [ new HtmlwebpackPlugin({ title: 'Webpack-demos', filename: 'index.html' }), new OpenBrowserPlugin({ url: 'http://localhost:8080' }) ] }; ~~~ 運行webpack后會發現根目錄生成了一個index.html，內容如下 ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack-demos</title> </head> <body> <script type="text/javascript" src="app.js"></script></body> </html> ~~~ 運行webpack-dev-server開啟服務器后會自動打開index.html ####總結 webpack是一個十分強大的工具，本文只是簡單地對一些自動化操作進行了配置，除了本文介紹的jsx/es6的編譯外，sass和less的編譯也是比較常用的，loader的寫法都相似。webpack支持很多插件，可以通過[官方文檔](http://webpack.github.io/docs/)和阮一峰的[webpack教程](https://github.com/ruanyf/webpack-demos)進行學習。