Webpack

在前端大行其道的時代，不管是傳統(tǒng)PC端應用，還是日益?zhèn)涫芮嗖A的MobileAPP，功能越來越豐富，用戶體驗越來越好，必然導致業(yè)務邏輯越來越復雜，代碼越來越多，客戶端加載也是越來越慢。為了解決這些問題，便出現了如火如荼的模塊化和一系列前端優(yōu)化工具，webpack就是優(yōu)化工具其中之一。

webpack是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產環(huán)境部署的前端資源。本文就簡單介紹webpack的基本使用和config配置。

前提：windows下node和npm環(huán)境已經配置OK，cmd命令行中node -v和npm -v都能正常顯示版本。

安裝

全局安裝

    npm i -g webpack

項目跟目錄下創(chuàng)建package.json文件

    npm init    //執(zhí)行命令后一路enter鍵就OK

    npm i webpack --save-dev

示例目錄結構：

  demo/                       根目錄
      app/                    打包前的資源文件
          entry.js            entry.js是入口文件
          b.js                b.js是entry.js中引用的一個模塊
          css/                css文件資源
              style.css       style.css是entry.js中引用的css
              reset.css       reset.css是style.css中@import的公共樣式
      build/                  打包后的文件存放的文件夾
      node_modules/           npm的依賴包
      index.html              調試展現的頁面
      package.json            項目的基本信息、依賴包的版本

entry.js

    // 引入app.js
    var str = require('./b.js');
    // 引入外部樣式表
    // 沒有配置config的加載css的寫法
    /*require('!style-loader!css-loader!./css/style.css');*/
    // 配置config之后的寫法
    require('./css/style.css');
    document.body.innerHTML = '<h1>'+str+'</h1>';

b.js

    module.exports = 'zmnaer.com';

style.css

    h1{
        color: #f00;
        font-size: 40px;
    }

reset.css

    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: #eee;
    }

執(zhí)行打包

    webpack app/entry build/build.js

執(zhí)行結束后就會在build文件夾中生成打包后的build.js。

webpack的`config`配置

在根目錄下新建webpack-config.js，之后可在命令中直接輸入webpack執(zhí)行打包。

配置

    var webpack = require('webpack');
    var path = require('path');
    module.exports = {
        entry:'./app/entry.js', // 輸出文件入口
        output:{    // 輸出路徑
            path:__dirname, // 取得當前目錄路徑
            filename:'./build/build.js' // 輸出文件路徑、文件名
        },
        module:{    // 加載模塊插件
            loaders:[   // 加載器 插件
                {
                    test:/\.css$/,  // 正則匹配css文件
                    loader:['style-loader','css-loader'],   // style css 加載器，順序不能顛倒，有依賴關系
                    exclude:'/node_module/' // 排除的文件夾
                    /*include:'/app/'       // 多個就用數組*/
                }
            ]
        },
        resolve:{
            extensions:['','.css','.js','.jsx']
        },
        plugins:[   //插件
            new webpack.BannerPlugin('This file is created by auto')
        ]
    };

一、entry入口文件

entry配置
1. 只有一個入口文件時：是一個字符串，如：entry:'./app/entry.js'
2. 有兩個及以上入口文件時：是一個對象
  - a. 是數組時，是將多個模塊打包成一個模塊。依賴性最高的放在最后，如：entry:["./app/a.js",".app/b.js"]
  - b. 是鍵值對時，是需要分別打包多個模塊，如：

    entry:{
        module1:'./app/a.js',
        module2:'./app/b.js',
    }

二、loaders（加載器）

在commonJS、AMD、CMD規(guī)范下，前端編程逐漸趨向模塊化。因此在開發(fā)過程中，模塊化不僅僅只加載js模塊，css、json等模塊也同樣運用此方法加載。
而webpack默認只能加載js資源文件，如果想要加載其他文件資源，需要用到各種加載器。

1、style-loader和css-loader

加載外聯css文件

安裝

  npm i --save-dev style-loader css-style

配置

  loaders:{
      test:/\.css$/,
      loader:'style-loader!css-loader?modules'
  }

2、json-loader

加載json文件

安裝
```
  npm i --save-dev json-loader
```

配置

  loaders:{
      test:/\.json$/,
      loader:'json-loader'
  }

3、babel-loader

編譯ES6的js文件以及react編譯加載

安裝

  npm i --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
  npm i --save-dev react react-dom

配置

  loader:{
      test:/\.js$/,
      loader:"babel-loader",
      exclude:"/node_modules/",
      query:{
          presets:["es2015","react"]
      }
  }

注意：項目根目錄必須創(chuàng)建.babelrc文件，內容如下：
```
  {"presets":["es2015"]}
```

4、postcss-loader和autoprefixer（自動添加前綴的插件）

安裝

  npm i --save-dev postcss-loader autoprefixer

配置

  loaders:{
      test:/\.css$/,
      loader:"style-loader!css-loader?module!postcss"
  },
  postcss:{
      require('autoprefixer') //調用autoprefixer插件
  }

三、plugins（插件）

1、HtmlWebpackPlugin

這個插件可以幫助生成HTML，并且與打包后的build.js文件同目錄。配置:
plugins: [new HtmlWebpackPlugin()]

2、BannerPlugin

這個插件能在打包后的js文件開頭位置增加一個頭注釋。配置:
plugins:[new webpack.BannerPlugin('webpack file by zm.')]
更多請參考：官網Plugins

四、webpack-dev-server

webpack-dev-server是一個輕量級的服務器，修改文件源碼后，自動刷新頁面將修改同步到頁面上。

安裝
npm i webpack-dev-server -g // 全局安裝
npm i webpack-dev-server --save-dev // 項目根目錄下安裝
webpack命令參數：
編譯的輸出內容帶有進度和顏色
webpack-dev-server --progress --color
啟動監(jiān)聽模式并自動打包
webpack-dev-server --watch
設置端口號
webpack-dev-server --port 8080
熱加載并自動刷新
webpack-dev-server --hot --inline
使用另一份配置文件（比如webpack.es6.config.js）來打包
webpack --config webpack.es6.config.js
壓縮混淆腳本
webpack -p
生成map映射文件
webpack -d
使用webpack命令打包時，默認是根據webpcak.config.js配置文件進行打包。有時因為開發(fā)需求，可能會配置多個不同的config.js文件進行不同的操作，如：webpack.es6.config.js、webpack.react.config.js，這樣在執(zhí)行操作的時候會添加以下參數：
webpack --config webpack.es6.config.js // 針對es6語法
webpack --config webpack.react.config.js // 針對react

五、package.json命令配置

如果在命令行中要輸入以下類似命令：
1）webpack-dev-server --port 3000 --hot --inline
2）webpack-dev-server --port 3000 --hot --inline --config webpack.es6.config.js
3）webpack-dev-server --port 3000 --hot --inline --config webpack.react.config.js
每次打包或啟動都要輸入這么老長的命令，不免覺得過于繁瑣，因此可在package.json中的script下配置相關屬性值：
```
  "script":{
      "test": "echo \"Error: no test specified\" && exit 1",      // 默認
      "build":"webpack-dev-server --port 3000 --hot --inline",       // 1
      "build-es6":"webpack-dev-server --port 3000 --hot --inline --config webpack.es6.config.js",      // 2
      "build-react":"webpack-dev-server --port 3000 --hot --inline --config webpack.react.config.js"      // 3
  }
```

之后就可以在命令行中輸入短小精悍的命令執(zhí)行相關操作：
1. npm run build
2. npm run build-es6
3. npm run build-react

提示：i是install的簡寫，推薦使用

參考文檔：

http://webpack.github.io/docs/
https://webpack.js.org/
http://webpackdoc.com/
http://www.cnblogs.com/haogj/p/5160821.html
http://www.jb51.net/article/96646.htm

不甚詳細，多多包涵 ^-O=O-

歡迎訪問：個人博客地址

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

學習webpack原來就是SoEasy

學習webpack原來就是SoEasy

安裝

webpack的`config`配置

一、entry入口文件

二、loaders（加載器）

1、style-loader和css-loader

2、json-loader

3、babel-loader

4、postcss-loader和autoprefixer（自動添加前綴的插件）

三、plugins（插件）

1、HtmlWebpackPlugin

2、BannerPlugin

四、webpack-dev-server

五、package.json命令配置

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

學習webpack原來就是SoEasy

安裝

webpack的config配置

一、entry入口文件

二、loaders（加載器）

1、style-loader和css-loader

2、json-loader

3、babel-loader

4、postcss-loader和autoprefixer（自動添加前綴的插件）

三、plugins（插件）

1、HtmlWebpackPlugin

2、BannerPlugin

四、webpack-dev-server

五、package.json命令配置

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

webpack的`config`配置

2、json-loader

4、postcss-loader和autoprefixer（自動添加前綴的插件）

四、webpack-dev-server

五、package.json命令配置