webpack安裝、基本配置

文章結構：

1. 什麼是webpack？

2. 安裝webpack

3. webpack基本配置

1、什麼是webpack？

      在學習react時發現大部分文章都是react和webpack結合使用的，因此在學react以前先學習下webpack。前端有一系列的構建工具，如grunt、gulp都是，具體區別聯繫不作詳述。Webpack：是一個解決模塊的定義、依賴和導出工具，目的就是把有依賴關係的各類文件（HTML，CSS，JS）打包成一系列的靜態資源構建成項目。

    

2、安裝webpack

項目文件目錄：

--src：代碼開發目錄，

--build：開發環境webpack編譯打包輸出目錄，一樣按照view、styles、js組織

--dist：生產環境webpack編譯打包輸出目錄，一樣按照view、styles、js組織

--node_modules：因此使用的nodeJs模塊

--package.json: 項目配置

--webpack.config.js: 開發環境webpack配置

--webpack.production.config.js: 生產環境webpack配置

 

1.webpack是一個基於node的項目,因此先裝好node和npm。

2.而後在項目文件夾下建立package.json文件，能夠從其餘地方複製粘貼過來，也能夠在當前項目文件夾下打開命令窗口，輸入npm init命令根據提示建立。下面是個人一個項目中用的package.json文件示例。

• devDependencies：是開發須要依賴的模塊，在發佈到生產環境時能夠將其去掉的模塊，諸如dev-tools,dev-server和jshint校驗等。利用命令 npm install module-name  --save-dev 會自動寫入package.json文件的devDependencies對象裏去。
• dependencies：是生產環境中須要依賴的模塊。而使用  npm install module-name --save 安裝的插件，會被寫入到 dependencies 對象裏面去。
• scripts：是給命令取了個別名，對於比較複雜的命令時很方便。如運行npm run dev等效於webpack-dev-server --devtool eval --progress --colors --hot --inline --content-base ./build。

 1 {
 2   "name": "inputCarInfo",
 3   "version": "1.0.0",
 4   "description": "create profile about the car",
 5   "main": "bundle.js",
 6   "scripts": {
 7     "build": "webpack",
 8     "dev": "webpack-dev-server --devtool eval --progress --colors --hot --inline --content-base ./build",
 9     "deploy": "set NODE_ENV=production && webpack -p --config webpack.production.config.js"
10   },
11   "keywords": [
12     "react",
13     "webpack"
14   ],
15   "author": "yangmin",
16   "license": "MIT",
17   "devDependencies": {
18     "babel-core": "^6.21.0",
19     "babel-loader": "^6.2.10",
20     "babel-preset-es2015": "^6.18.0",
21     "babel-preset-react": "^6.16.0",
22     "css-loader": "^0.26.1",
23     "extract-text-webpack-plugin": "^1.0.1",
24     "html-webpack-plugin": "^2.26.0",
25     "less": "^2.7.1",
26     "less-loader": "^2.2.3",
27     "node-sass": "^4.1.0",
28     "sass-loader": "^4.1.0",
29     "script-loader": "^0.7.0",
30     "style-loader": "^0.13.1",
31     "url-loader": "^0.5.7",
32     "webpack": "^1.14.0",
33     "webpack-dev-server": "^1.16.2",
34     "webpack-md5-hash": "0.0.5",
35     "webpack-split-hash": "0.0.1"
36   },
37   "dependencies": {
38     "react": "^15.4.1",
39     "react-dom": "^15.4.1"
40   }
41 } 

3.在項目文件夾下新建webpack.config.js文件，比較簡單的配置以下。

• entry:表示入口文件，能夠有多個入口文件。文件中包含全部邏輯代碼，依賴的其餘文件如css，js等。
• output：將入口文件打包、編譯輸出的文件，是頁面最終引入的文件。

var path = require('path');

 var config= {
    entry: path.resolve(__dirname, 'src/js/entry.js'),
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'js/bundle.js',
    },
};

module.exports = config;

3、webpack基本配置

1.設置webpack-dev-server

　　在開發時，每次更改文件後要運行npm run build 來從新編譯、打包文件，無聊又麻煩。咱們能夠設置 webpack-dev-server來讓他自動運行。webpack-dev-server 主要是啓動了一個使用 express 的 Http服務器 ，它的做用主要是用來伺服資源文件 。此外這個 Http服務器 和 client 使用了 websocket 通信協議，原始文件做出改動後， webpack-dev-server 會實時的編譯，可是最後的編譯的文件並無輸出到目標文件夾。在webpack.config.js配置文件中增長入口命令可使文件變化時瀏覽器自動刷新。

　　首先要安裝它 npm install webpack-dev-server --save-dev。而後在package.json文件的scripts部分增長快捷指令：

1 "scripts": {    
2      "dev": "webpack-dev-server --devtool eval --port 7070 --progress --colors --compress --hot --inline --content-base ./build"   
3  },

當你在命令行裏運行 npm run dev 的時候他會執行 dev 屬性裏的值，便可啓動webpack服務器監聽。這些指令的意思：

　　webpack-dev-server：在 localhost:7070 創建一個 Web 服務器。

　　--devtool eval: 爲你的代碼建立原地址。當有任何報錯的時候可讓你更精確的定位到文件和行號。

　　--progress： 顯示編譯的輸出內容進度。

　　--compress: 啓用gzip壓縮。

　　--hot:熱替換，開發過程當中任何前端代碼的更改都會實時的在瀏覽器中表現出來，不須要手動刷新。

　　--colors：顯示編譯的輸出內容顏色。

　　--inline：webpack提供兩種自動刷新模式 iframe/inline。默認iframe。

　　--content-base ./build:指向設置的輸出目錄，即build文件夾。

詳細請參考webpack-dev-server配置文檔。

若是你還要進行後端開發，就要採用雙服務器模式：一個後端服務器和一個資源服務器（即Webpack-dev-server)。配置雙服務器熱替換模式首先須要修改wepack.config.js的entry屬性值：

entry:[
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:7070',
    path.resolve(__dirname,'src/js/entry.js')        
],

運行npm run dev打開服務器，在瀏覽器中訪問http://localhost:7070 便可看到效果。

2.loader

　　webpack 自己只能處理 JavaScript 模塊，若是要處理其餘類型的文件，就須要使用 loader 進行轉換。Loader 能夠理解爲模塊和資源的轉換器，它自己是一個函數，接受源文件做爲參數，返回轉換的結果。這樣，咱們就能夠經過 require 來加載任何類型的模塊或文件，好比 CoffeeScript、 JSX、 LESS 或圖片。Loader 自己也是運行在 node.js 環境中的 JavaScript 模塊，它一般會返回一個函數。大多數狀況下，咱們經過 npm 來管理 loader，可是你也能夠在項目中本身寫 loader 模塊。詳細參考loaders。

　　通常loader 通常以xxx-loader的方式命名，xxx表明了這個 loader 要作的轉換功能，好比css-loader。Loader 能夠在require()引用模塊的時候添加，也能夠在 webpack 全局配置中進行綁定，還能夠經過命令行的方式使用。例如頁面中要引入樣式文件main.css，咱們能夠將main.css當作一個模塊，而後css-loader會遍歷 CSS 文件，而後找到 url() 處理他們，style-loader 會把原來的 CSS 代碼插入頁面中的一個 style 標籤中。

• 經過require()添加loader，例如在入口文件entry.js中引入以下：

require("!style!css!../src/css/main.css") // 載入 main.css,多個loader之間用‘!’鏈接

•  在webpack.config.js中全局配置：添加config.module
   1 var webpack = require("webpack");
   2 var path = require('path');
   3 
   4 var config = {
   5     entry:[
   6         'webpack/hot/dev-server',
   7         'webpack-dev-server/client?http://localhost:7070', //增長的入口點使文件改變時瀏覽器自動刷新固然你也能夠直接在你 index.html 引入這部分代碼:<script src="http://localhost:7070/webpack-dev-server.js"></script>
   8         path.resolve(__dirname,'src/js/entry.js')        
   9     ],    
  10     output:{
  11         path: path.resolve(__dirname, 'build'),
  12         publicPath:'../',    
  13         filename: 'js/bundle.[chunkhash:8].js',
  14         chunkFilename:"js/[name].[chunkhash:8].js"
  15     },
  16     module:{
  17         loaders:[
  18             {//js、jsx
  19                 test: /\.jsx?$/,
  20                 exclude:/node_modules/,//排除node_modules中的庫文件，加快編譯速度
  21                 loader: 'babel',
  22                 query:{
  23                     presets:['es2015', 'react']
  24                 }
  25             },            
  26             {//css
  27                 test: /\.css$/,
  28                 loader: ExtractTextPlugin.extract("style", "css")//多個加載器經過!連接,可忽略加載器後綴「-loader」
  29             },            
  30             {//sass,還須要安裝node-sass
  31                 test: /\.scss$/,
  32                 loader: 'style!css!sass'
  33             },
  34             
  35             {//less,還須要安裝less
  36                 test: /\.less$/,
  37                 loader: 'style!css!less'
  38             },
  39             {//url-loader:圖片、字體圖標加載器，是對file-loader的上層封裝,支持base64編碼。傳入的size（也有的寫limit) 參數是告訴它圖片若是不大於 25KB 的話要自動在它從屬的 css 文件中轉成 BASE64 字符串.
  40                 test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
  41                 loader: 'url?limit=25000&name=[name].[ext]'
  42             }
  43         ]
  44     },    
  45 };
  46 
  47 module.exports = config;

  上面是經常使用的loader。點此查看更多loader。補充一點編譯sass文件除了須要安裝sass-loader，還要安裝node-sass。但安裝node-sass時因爲網絡緣由可能會提示下載SASS_BINARY二進制文件失敗，解決辦法：

  • 在https://github.com/sass/node-sass/releases/tag/v3.4.2，根據報錯信息下載相應版本文件，假設放在E盤根目錄下。
  • 回到命令行安裝界面。設置SASS_BINARY_PATH環境變量 set SASS_BINARY_PATH=E:/win32-ia32-46_binding.node 文件名根據本身下載的文件自行修改。
  • 再次運行安裝命令：npm install node-sass。
  • 在項目的文件夾的node_modules/node-sass文件夾下新建文件夾vendor\win32-ia32-46。
  • 將文件win32-ia32-46_binding.node更名爲binding.node放在文件夾vendor\win32-ia32-46下

3.插件plugins

　　插件能夠完成更多loader不能完成的任務。在webpack.config.js中增長config.plugins：

 1 var webpack = require("webpack");
 2 var path = require('path');
 3 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 4 var HtmlWebpackPlugin = require('html-webpack-plugin');
 5 
 6 var config = {
 7         //省略entry、output等
 8      plugins:[//給打包輸出的文件加banner
 9         new webpack.BannerPlugin("The file is creted by yangmin.--" + new Date()),
10         new webpack.ProvidePlugin({
11         　　$: "webpack-zepto",             
12     　　}),
13     　　/*插件：單獨使用style標籤加載css文件*/
14     　　new ExtractTextPlugin("css/[name].css"),//設置其路徑(路徑相對於path)
15     　　/*插件：動態生成html，在webpack完成前端資源打包之後，自動將打包後的資源路徑和版本號寫入HTML中，達到自動化的效果。*/
16     　　new HtmlWebpackPlugin({
17         　　filename:'view/index-build.html',    //生成的html存放路徑，相對於 path
18             template:'src/view/index.html',    //html模板路徑
19             inject:true,    //容許插件修改哪些內容，包括head與body
20             hash:false,    //爲靜態資源生成hash值
21             minify:{    //壓縮HTML文件
22                 removeComments:false,    //移除HTML中的註釋
23                 collapseWhitespace:false    //刪除空白符與換行符
24            }
25        })
26     ]
27 };
28    module.export = config; 
原文：http://www.javashuo.com/article/p-qruwjoeu-dp.html