CommonJS、AMD、CMD是用于JavaScript模塊管理的三大規(guī)范，CommonJS定義的是模塊的同步加載，是一個更偏向于服務(wù)器端的規(guī)范（也可以在瀏覽器中使用），主要用于Nodejs，根據(jù)CommonJS規(guī)范，一個單獨的文件就是一個模塊，加載模塊使用require()方法，該方法讀取一個文件并執(zhí)行，最后返回文件內(nèi)部的exports對象。

AMD和CMD則是定義模塊異步加載適用于瀏覽器端，都是為了 JavaScript 的模塊化開發(fā)，（這里說一下為什要有異步加載，因為瀏覽器如果使用common.js同步加載模塊的話，就會導致性能等問題，所以針對這個問題，又出了一個規(guī)范，這個規(guī)范可以實現(xiàn)異步加載依賴模塊）

AMD規(guī)范會提前加載依賴模塊，AMD規(guī)范是通過requireJs 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。

（AMD 規(guī)范：https://github.com/amdjs/amdjs-api/wiki/AMD）

CMD規(guī)范會延遲加載依賴模塊， CMD 規(guī)范是 SeaJs 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。

（CMD規(guī)范：https://github.com/seajs/seajs/issues/242）

AMD規(guī)范和CMD規(guī)范的區(qū)別

對于依賴的模塊，AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行。不過 RequireJS 從 2.0 開始，也改成可以延遲執(zhí)行（根據(jù)寫法不同，處理方式不同）
CMD 推崇依賴就近，AMD 推崇依賴前置
AMD 的 API 默認是一個當多個用，CMD 的 API 嚴格區(qū)分，推崇職責單一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，沒有全局 require，而是根據(jù)模塊系統(tǒng)的完備性，提供 seajs.use 來實現(xiàn)模塊系統(tǒng)的加載啟動。CMD 里，每個 API 都簡單純粹

webpack和gulp的區(qū)別

gulp是前端自動化構(gòu)建工具，強調(diào)的是前端開發(fā)的工作流程，我們可以通過配置一系列的task，定義task處理的事情（代碼壓縮、合并、編譯、瀏覽器實時更新等），然后定義執(zhí)行順序，來讓gulp執(zhí)行這些task，從而構(gòu)建項目的整個前端開發(fā)流程，自動化構(gòu)建工具并不能把所有模塊打包到一起，也不能構(gòu)建不同模塊之間的依賴關(guān)系。
webpack是 JavaScript 應(yīng)用程序的模塊打包器，強調(diào)的是一個前端模塊化方案，更側(cè)重模塊打包，我們可以把開發(fā)中的所有資源（圖片、js文件、css文件等）都看成模塊，通過loader（加載器）和plugins（插件）對資源進行處理，打包成符合生產(chǎn)環(huán)境部署的前端資源。

5、webpack整體認知

(1)、webpack的核心概念分為入口(Entry)、加載器(Loader)、插件(Plugins)、出口(Output);

入口(Entry)：入口起點告訴 webpack 從哪里開始，并根據(jù)依賴關(guān)系圖確定需要打包的文件內(nèi)容
加載器(Loader)：webpack 將所有的資源（css, js, image 等）都看做模塊，但是 webpack 能處理的只是 JavaScript，因此，需要存在一個能將其他資源轉(zhuǎn)換為模塊，讓 webpack 能將其加入依賴樹中的東西，它就是 loader。loader用于對模塊的源代碼進行轉(zhuǎn)換。loader 可以使你在 import 或"加載"模塊時預(yù)處理文件。因此，loader 類似于其他構(gòu)建工具中“任務(wù)(task)”，并提供了處理前端構(gòu)建步驟的強大方法。

rules: [
    {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
    }
]

插件(Plugins)：loader 只能針對某種特定類型的文件進行處理，而 plugin 的功能則更為強大。在 plugin 中能夠介入到整個 webpack 編譯的生命周期，Plugins用于解決 loader 無法實現(xiàn)的其他事情，也就是說loader是預(yù)處理文件，那plugin 就是后處理文件。

對loader打包后的模塊文件（bundle.js）進行二次優(yōu)化處理，例如：代碼壓縮從而減小文件體積

提供輔助開發(fā)的作用：例如：熱更新（瀏覽器實時顯示）

plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
]

二、webpack安裝

1、安裝node

使用 node -v 命令檢查版本

2、安裝cnpm

https://npmmirror.com/

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用 cnpm -v 命令檢查版本

3、安裝nrm的兩種方法

https://www.npmjs.com/package/nrm

nrm可以幫助我們切換不同的NPM源的快捷開關(guān)，可以切換的NPM源包括：npm，cnpm，taobao， rednpm， npmMirror ， edunpm

#第一種方法（由于是外網(wǎng)訪問進行安裝，可能會被墻）
npm install -g nrm

#第二種方法（國內(nèi)的淘寶鏡像，訪問穩(wěn)定，推薦）
cnpm install -g nrm

使用 nrm - V 命令檢查版本(注意這里的 V 是大寫的)
使用nrm ls 命令可以查看當前可以可以切換的 NPM源
使用 npm use cnpm 命令指定要使用的哪種NPM源

4、安裝webpack

全局安裝

npm install --global webpack

在項目中安裝最新版本或特定版本，分別執(zhí)行以下命令：

npm install --save-dev webpack
npm install --save-dev webpack@<version>

三、webpack配置

搭建項目結(jié)構(gòu)

webpack（項目總目錄）

dist

src

moudle1.js

function sum(x,y){
    return x + y;
}
// 導出 sum 函數(shù)
module.exports = sum;

main.js

// 1、獲取index.html中的dom對象
var first = document.getElementById('first');
var btn = document.getElementById('btn');
var two = document.getElementById('two');
var res = document.getElementById('res');
btn.onclick = function(){
                var firstValue = parseFloat(first.value);
                var twoValue = parseFloat(two.value);
                //2、獲取 module1.js中的 sum函數(shù)
                //http://www.ruanyifeng.com/blog/2015/05/require.html
                var sum = require('./module1.js');
                res.value = sum(firstValue,twoValue);
            }

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="first">
    <input type="button" id="btn" value="+">
    <input type="text" id="two">
    <input type="button" id="btn" value="=">
    <input type="text" id="res">
    <script src="./dist/js/bulid.js"></script>
</body>
</html>

webpack.config.js(手動創(chuàng)建)

const path = require('path');  // 首先要引入node.js中path 模塊，用于處理文件與目錄的路徑
// const 命令聲明一個只讀的常量，一旦聲明，值不可以改變，改變會報錯；只聲明不賦值也會報錯
// 常量存儲的是一個不可以變化的變量。
// 
module.exports = {
    entry:'./src/./js/main.js', // 指定入口文件
    output:{
        path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路徑目錄
        filename: 'bulid.js' // 制定出口文件的名稱
    },

1、初始化一個項目（會創(chuàng)建一個package.json文件）

npm init

2、在當前的項目中安裝Webpack作為依賴包

npm install --save-dev webpack

說明：

--save ：將配置信息保存到package.json中，

同時 --save ：也是項目生產(chǎn)環(huán)境，項目發(fā)布之后還依賴的東西，保存在dependencies

例如：如果你用了 jQuery，由于發(fā)布之后還是依賴jQuery，所以是dependencies

--save-dev ：是項目開發(fā)環(huán)境依賴的東西，保存在devDependencies中

例如：寫 ES6 代碼，如果你想編譯成 ES5 發(fā)布那么 babel 就是devDependencies

3、當前項目結(jié)構(gòu)

4、實現(xiàn)CSS打包

npm install css-loader style-loader --save-dev
#或者
cnpm install css-loader style-loader --save-dev

在src—>css目錄中新建main.css

#first{
    border: 1px solid red;
}

在webpack.config.js中配置相關(guān)的loader

const path = require('path');  // 首先要引入node.js中path 模塊，用于處理文件與目錄的路徑
// const 命令聲明一個只讀的常量，一旦聲明，值不可以改變，改變會報錯；只聲明不賦值也會報錯
// 常量存儲的是一個不可以變化的變量。
// 
module.exports = {
    entry:'./src/./js/main.js', // 指定入口文件
    output:{
        path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路徑目錄
        filename: 'bulid.js' // 制定出口文件的名稱
    },
    module:{
        rules:[
        // 在webpack2中，loaders 被替換成了 rules 其實就是loader的規(guī)則
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
                // test 說明了當前 loader 能處理那些類型的文件
                // use 則指定了 loader 的類型。
                // 注意：數(shù)組中的loader不能省略擴展名
            }
        ]
    }
}

在main.js中獲取css目錄中的main.css文件

// 1、獲取index.html中的dom對象
var first = document.getElementById('first');
var btn = document.getElementById('btn');
var two = document.getElementById('two');
var res = document.getElementById('res');
    btn.onclick = function(){
        var firstValue = parseFloat(first.value);
        var twoValue = parseFloat(two.value);
        //2、獲取 module1.js中的 sum函數(shù)
        //http://www.ruanyifeng.com/blog/2015/05/require.html
        var sum = require('./module1.js');
        res.value = sum(firstValue,twoValue);
    }
    // 3、獲取css目錄中的main.css文件
    require('../css/main.css');

在終端中輸入 webpack命令進行css文件打包

5、實現(xiàn)SCSS打包

在src目錄中新建 sass目錄--> scss1.scss

// scss1.scss文件
$color:purple;
#two{
    border:1px solid $color; 
}

安裝對應(yīng)的loader

npm install sass-loader node-sass webpack --save-dev

或者

cnpm install sass-loader css-loader style-loader node-sass webpack --save-dev

在webpack.config.js中配置相關(guān)的loader

   const path = require('path');  // 首先要引入node.js中path 模塊，用于處理文件與目錄的路徑
   // const 命令聲明一個只讀的常量，一旦聲明，值不可以改變，改變會報錯；只聲明不賦值也會報錯
   // 常量存儲的是一個不可以變化的變量。
   // 
   module.exports = {
       entry:'./src/./js/main.js', // 指定入口文件
       output:{
           path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路徑目錄
           filename: 'bulid.js' // 制定出口文件的名稱
       },
       module:{
           rules:[
           // 在webpack2中，loaders 被替換成了 rules 其實就是loader的規(guī)則
           //  實現(xiàn) css 打包
               {
                   test: /\.css$/,
                   use: [ 'style-loader', 'css-loader' ]
                   // test 說明了當前 loader 能處理那些類型的文件
                   // use 則指定了 loader 的類型。
                   // 注意：數(shù)組中的loader不能省略擴展名
               },
               {
                   test: /\.scss$/,
                   // 注意 是sass-loader ，不是 scss-loader
                   use: [ 'style-loader', 'css-loader', 'sass-loader' ]
               }
           ]
       }
   }

在js目錄中 main.js里面引入 scss1.scss

// 1、獲取index.html中的dom對象
var first = document.getElementById('first');
var btn = document.getElementById('btn');
var two = document.getElementById('two');
var res = document.getElementById('res');
btn.onclick = function(){
    var firstValue = parseFloat(first.value);
    var twoValue = parseFloat(two.value);
    //2、獲取 module1.js中的 sum函數(shù)
    //http://www.ruanyifeng.com/blog/2015/05/require.html
    var sum = require('./module1.js');
    res.value = sum(firstValue,twoValue);
}
// 3、獲取css目錄中的main.css文件
require('../css/main.css');
// 4、獲取sass目錄中的scss1.scss文件
require('../sass/scss1.scss');

在終端中輸入 webpack命令進行scss文件打包

6、實現(xiàn)Less打包

安裝

cnpm install --save-dev

cnpm install less less-loder css-loader style-loader  webpack --save-dev

或者

cnpm install less-loader less --save-dev在webpack.config.js中配置相關(guān)的loader

在在src目錄中新建less目錄--> less1.less

@color:blue;
#res{
    border:1px dashed blue;
}

在webpack.config.js中配置相關(guān)的loader

const path = require('path');  // 首先要引入node.js中path 模塊，用于處理文件與目錄的路徑
// const 命令聲明一個只讀的常量，一旦聲明，值不可以改變，改變會報錯；只聲明不賦值也會報錯
// 常量存儲的是一個不可以變化的變量。
// 
module.exports = {
    entry:'./src/./js/main.js', // 指定入口文件
    output:{
        path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路徑目錄
        filename: 'bulid.js' // 制定出口文件的名稱
    },
    module:{
        rules:[
        // 在webpack2中，loaders 被替換成了 rules 其實就是loader的規(guī)則
            //  實現(xiàn) css 打包
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
                // test 說明了當前 loader 能處理那些類型的文件
                // use 則指定了 loader 的類型。
                // 注意：數(shù)組中的loader不能省略擴展名
            },
            // 實現(xiàn) scss 打包
            {
                test: /\.scss$/,
                // 注意 是sass-loader ，不是 scss-loader
                use: [ 'style-loader', 'css-loader', 'sass-loader' ]
            },
            // 實現(xiàn) less 打包
            {
                test: /\.less$/,
                use: [ 'style-loader', 'css-loader', 'less-loader' ]
            }
        ]
    }
}

在js目錄中 main.js里面引入 less1.less文件

// 5、獲取less目錄中的less1.less文件
require('../less/less1.less');

7、實現(xiàn)打包url資源（圖片、gif、圖標等）功能

在src 目錄中新建imgs目錄，放入兩張不同大小的圖片

在index.html中新增 <div id="bg1"></div> <div id="bg2"></div>

在mian.css中新增

// mian.css文件
#bg1{
    width: 200px;
    height: 200px;
    background: url('../imgs/bxg.jpg');
}
#bg2{
    width: 200px;
    height: 200px;
    background: url('../imgs/web.jpg') no-repeat;
}

使用注意事項

1.如果我們希望在頁面引入圖片（包括img的src和background的url）。當我們基于webpack進行開發(fā)時，引入圖片會遇到一些問題。

?2. 其中一個就是引用路徑的問題。拿background樣式用url引入背景圖來說，我們都知道，webpack最終會將各個模塊打包成一個文件，因此我們樣式中的url路徑是相對入口html頁面的，而不是相對于原始css文件所在的路徑的。這就會導致圖片引入失敗。這個問題是用file-loader解決的，file-loader可以解析項目中的url引入（不僅限于css），根據(jù)我們的配置，將圖片拷貝到相應(yīng)的路徑，再根據(jù)我們的配置，修改打包后文件引用路徑，使之指向正確的文件。

3.? 另外，如果圖片較多，會發(fā)很多http請求，會降低頁面性能。這個問題可以通過url-loader解決。url-loader會將引入的圖片編碼，生成dataURl。相當于把圖片數(shù)據(jù)翻譯成一串字符。再把這串字符打包到文件中，最終只需要引入這個文件就能訪問圖片了。當然，如果圖片較大，編碼會消耗性能。因此url-loader提供了一個limit參數(shù)，小于limit字節(jié)的文件會被轉(zhuǎn)為DataURl，大于limit的還會使用file-loader進行copy。

4.? url-loader和file-loader是什么關(guān)系呢？簡答地說，url-loader封裝了file-loader。url-loader不依賴于file-loader，即使用url-loader時，只需要安裝url-loader即可，不需要安裝file-loader，因為url-loader內(nèi)置了file-loader。通過上面的介紹，我們可以看到，url-loader工作分兩種情況：

1.文件大小小于limit參數(shù)，url-loader將會把文件轉(zhuǎn)為DataURL；
2.文件大小大于limit，url-loader會調(diào)用file-loader進行處理，參數(shù)也會直接傳給file-loader。因此我們只需要安裝url-loader即可。

安裝

cnpm install

cnpm install url-loader file-loader --save-dev

在webpack.config.js中配置相關(guān)的loader

const path = require('path');  // 首先要引入node.js中path 模塊，用于處理文件與目錄的路徑
// const 命令聲明一個只讀的常量，一旦聲明，值不可以改變，改變會報錯；只聲明不賦值也會報錯
// 常量存儲的是一個不可以變化的變量。
// 
module.exports = {
    entry:'./src/./js/main.js', // 指定入口文件
    output:{
        path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路徑目錄
        filename: 'bulid.js' // 制定出口文件的名稱
        publicPath:'dist/'
        // path:所有輸出文件的目標路徑;
        // publicPath:輸出解析文件的目錄，url 相對于 HTML 頁面
    },
    module:{
        rules:[
        // 在webpack2中，loaders 被替換成了 rules 其實就是loader的規(guī)則
            //  實現(xiàn) css 打包
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
                // test 說明了當前 loader 能處理那些類型的文件
                // use 則指定了 loader 的類型。
                // 注意：數(shù)組中的loader不能省略擴展名
            },
            // 實現(xiàn) scss 打包
            {
                test: /\.scss$/,
                // 注意 是sass-loader ，不是 scss-loader
                use: [ 'style-loader', 'css-loader', 'sass-loader' ]
            },
            // 實現(xiàn) less 打包
            {
                test: /\.less$/,
                use: [ 'style-loader', 'css-loader', 'less-loader' ]
            },
            // 實現(xiàn) url 資源打包
            {
                // 圖片和字體文件使用 url-loader 來處理
                test: /\.(png|jpg|gif|ttf|eot|woff|woff2|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        // options 為可以配置的選項
                        options: {
                            limit: 8192
                            // limit=8192表示將所有小于8kb的圖片都轉(zhuǎn)為base64形式（為什么                               呢？因為一個很小的圖片，不值當?shù)娜グl(fā)送一個請求，減少請求次                               數(shù)。）
                            // （其實應(yīng)該說超過8kb的才使用 url-loader 來映射到文件，否                              則轉(zhuǎn)為dataurl形式）
                        }
                    }
              ]
               //保證輸出的圖片名稱與之前命名的圖片名稱保持一致(目前只是支持這樣的寫法，                   webpack3 沒有響應(yīng)的options進行配置)
             // use:'url-loader?limit=8192&name=imgs/[name].[ext]' 
          }
          ]
      }
  }

在main.js中引入mui目錄中icons-extra.css的文件

// 5、獲取less目錄中的less1.less文件
require('../less/less1.less');
// 6、獲取src目錄中的mui目錄中icons-extra.css的文件
require('../mui/css/icons-extra.css');

8、Webpack-dev-server結(jié)合后端服務(wù)器的熱替換配置

webpack-dev-server提供了一個簡單的 web 服務(wù)器，并且能夠?qū)崟r重新加載(live reloading)，同時把生成好的js和html構(gòu)建到我們的電腦內(nèi)存中，這樣的話，即使我們的目錄中沒有了相關(guān)js等文件，還能夠加載出來，這樣能夠提高我們頁面運行速度。

安裝 webpack-dev-server 插件

#先把之前依賴的包安裝
cnpm install

cnpm install webpack-dev-server --save-dev

 // webpack.config.js
   const path = require('path');  // 首先要引入node.js中path 模塊，用于處理文件與目錄的路徑
   // const 命令聲明一個只讀的常量，一旦聲明，值不可以改變，改變會報錯；只聲明不賦值也會報錯
   // 常量存儲的是一個不可以變化的變量。
   module.exports = {
       entry:'./src/./js/main.js', // 指定入口文件
       output:{
           path: path.resolve(__dirname, 'dist/js'), // 指定出口文件的路徑目錄
           filename: 'bulid.js' // 制定出口文件的名稱
       },
       module:{
           rules:[
           // 在webpack2中，loaders 被替換成了 rules 其實就是loader的規(guī)則
               //  實現(xiàn) css 打包
               {
                   test: /\.css$/,
                   use: [ 'style-loader', 'css-loader' ]
                   // test 說明了當前 loader 能處理那些類型的文件
                   // use 則指定了 loader 的類型。
                   // 注意：數(shù)組中的loader不能省略擴展名
               },
               // 實現(xiàn) scss 打包
               {
                   test: /\.scss$/,
                   // 注意 是sass-loader ，不是 scss-loader
                   use: [ 'style-loader', 'css-loader', 'sass-loader' ]
               },
               // 實現(xiàn) less 打包
               {
                   test: /\.less$/,
                   use: [ 'style-loader', 'css-loader', 'less-loader' ]
               },
               // 實現(xiàn) url 資源打包
               {
                   // 圖片文件使用 url-loader 來處理
                   test: /\.(png|jpg|gif|ttf)$/,
                   use: [
                   {
                       loader: 'url-loader',
                       // options 為可以配置的選項
                       options: {
                         limit: 8192
                         // limit=8192表示將所有小于8kb的圖片都轉(zhuǎn)為base64形式
                         // （其實應(yīng)該說超過8kb的才使用 url-loader 來映射到文件，否則轉(zhuǎn)為data url形式）
                     }
                 }
                 ]
             }
             ]
         },
          devServer: {
           // contentBase: './dist', // 在 localhost:8080(默認) 下建立服務(wù)，將 dist 目錄下的文件，作為可訪問文件  contentBase：告訴服務(wù)器從哪里提供內(nèi)容
           // 或者通過以下方式配置
           contentBase: path.join(__dirname, "dist"),
           compress: true,
           // 當它被設(shè)置為true的時候?qū)λ械姆?wù)器資源采用gzip壓縮
           // 對JS，CSS資源的壓縮率很高，可以極大得提高文件傳輸?shù)乃俾?，從而提升web性能
           port: 9000, // 如果想要改端口，可以通過 port更改
           hot: true, // 啟用 webpack 的模塊熱替換特性()
           inline: true, // 實現(xiàn)實時重載（實現(xiàn)自動刷新功能）默認情況下是 true。
           host: "localhost" // 如果你希望服務(wù)器外部可訪問，指定使用一個 host。默認是 localhost(也就是你可以不寫這個host這個配置屬性)。
       }
    }

// package.json
   {
     "name": "mywebpack",
     "version": "1.0.0",
     "description": "",
     "main": "webpack.config.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "start": "webpack-dev-server --open"
       // "start": "webpack-dev-server --open --port 8080 --hot --inline"  // 如果在這里配置了，就不用在webpack.config.js中配置devServer屬性了。
     },
     "author": "",
     "license": "ISC",
     "devDependencies": {
       "css-loader": "^0.28.7",
       "file-loader": "^1.1.5",
       "html-webpack-plugin": "^2.30.1",
       "less": "^3.0.0-alpha.3",
       "less-loader": "^4.0.5",
       "node-sass": "^4.5.3",
       "sass-loader": "^6.0.6",
       "style-loader": "^0.19.0",
       "url-loader": "^0.6.2",
       "webpack": "^3.8.1",
       "webpack-dev-server": "^2.9.3"
     }
   }
   ```
-   在命令行中運行 `npm start`，就會看到瀏覽器自動加載頁面。如果現(xiàn)在修改和保存任意源文件，web 服務(wù)器就會自動重新加載編譯后的代碼，但是打開后發(fā)現(xiàn)，打開的是 dist目錄，我們想要的是 index.html顯示我們的頁面，所以這是我們還要借助里另一個 `html-webpack-plugin` 插件。

html-webpack-plugin 簡單創(chuàng)建 HTML 文件，用于服務(wù)器訪問，其中包括使用script標簽的body中的所有webpack包。

安裝 html-webpack-plugin 插件

cnpm install --save-dev html-webpack-plugin

webpack.config.js配置

const path = require('path'); // 首先要引入node.js中path 模塊，用于處理文件與目錄的路徑
// const 命令聲明一個只讀的常量，一旦聲明，值不可以改變，改變會報錯；只聲明不賦值也會報錯
// 常量存儲的是一個不可以變化的變量。
// 引入html-webpack-plugin 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
    entry: './src/./js/main.js', // 指定入口文件
    output: {
        path: path.resolve(__dirname, 'dist/js'), // 指定出口文件的路徑目錄
        filename: 'bulid.js' // 制定出口文件的名稱
    },
    module: {
        rules: [
            // 在webpack2中，loaders 被替換成了 rules 其實就是loader的規(guī)則
            //  實現(xiàn) css 打包
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
                    // test 說明了當前 loader 能處理那些類型的文件
                    // use 則指定了 loader 的類型。
                    // 注意：數(shù)組中的loader不能省略擴展名
            },
            // 實現(xiàn) scss 打包
            {
                test: /\.scss$/,
                // 注意 是sass-loader ，不是 scss-loader
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            // 實現(xiàn) less 打包
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            // 實現(xiàn) url 資源打包
            {
                // 圖片文件使用 url-loader 來處理
                test: /\.(png|jpg|gif|ttf)$/,
                use: [{
                    loader: 'url-loader',
                    // options 為可以配置的選項
                    options: {
                        limit: 8192
                            // limit=8192表示將所有小于8kb的圖片都轉(zhuǎn)為base64形式
                            // （其實應(yīng)該說超過8kb的才使用 url-loader 來映射到文件，否則轉(zhuǎn)為data url形式）
                    }
                }]
            }
        ]
    },
    devServer: {
        // contentBase: './dist', // 在 localhost:8080(默認) 下建立服務(wù)，將 dist 目錄下的文件，作為可訪問文件  contentBase：告訴服務(wù)器從哪里提供內(nèi)容
        // 或者通過以下方式配置
        contentBase: path.join(__dirname, "dist"),
        port: 9000, // 如果想要改端口，可以通過 port更改
        hot: true, // 啟用 webpack 的模塊熱替換特性()
        inline: true, // 實現(xiàn)實時重載（實現(xiàn)自動刷新功能）默認情況下是 true。
        host: "localhost" // 如果你希望服務(wù)器外部可訪問，指定使用一個 host。默認是 localhost(也就是你可以不寫這個host這個配置屬性)。
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '首頁', // 用于生成的HTML文檔的標題
            filename: 'index.html', //寫入HTML的文件。默認為index.html。也可以指定一個子目錄（例如：）assets/admin.html
            template: 'index.html' // Webpack需要模板的路徑
        }),
        new webpack.HotModuleReplacementPlugin() // 需要結(jié)合 啟用熱替換模塊(Hot Module Replacement)，也被稱為 HMR
    ]
}

再次使用npm start命令就可以實現(xiàn)瀏覽器自動更新。

問題來了，HtmlWebpackPlugin中的 title并沒有顯示出來，原因是需要在定義的template模板中使用ejs語法，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- EJS 語法 
            /* EJS是一個簡單高效的模板語言，通過數(shù)據(jù)和模板，可以生成HTML標記文本。可以說EJS是一個JavaScript庫，EJS可以同時運行在客戶端和服務(wù)器端，客戶端安裝直接引入文件即可 */
        -->
    <title><%= htmlWebpackPlugin.options.title%></title>
</head>
<body>
    <input type="text" id="first">
    <input type="button" id="btn" value="+">
    <input type="text" id="two">
    <input type="button" id="btn" value="=">
    <input type="text" id="res">
    <div id="bg1"></div>
    <div id="bg2"></div>
</body>
</html>

再次使用npm start命令就可以啦。

9、ES6轉(zhuǎn)換為ES5語法

安裝

cnpm install --save-dev babel-loader babel-core babel-preset-env

babel-core如果某些代碼需要調(diào)用Babel的API進行轉(zhuǎn)碼，就要使用babel-core模塊

babel-preset-env通過根據(jù)您的目標瀏覽器或運行時環(huán)境自動確定您需要的Babel插件

babel 對一些公共方法使用了非常小的輔助代碼，比如 _extend。默認情況下會被添加到每一個需要它的文件中,你可以引入 babel runtime 作為一個獨立模塊，來避免重復引入。

你必須執(zhí)行 npm install babel-plugin-transform-runtime --save-dev 來把它包含到你的項目中

也要使用 npm install babel-runtime --save 把 babel-runtime 安裝為一個依賴

配置

// 實現(xiàn) url 資源打包
                    {
                        // 圖片文件使用 url-loader 來處理
                        test: /\.(png|jpg|gif|ttf)$/,
                        use: [{
                            loader: 'url-loader',
                            // options 為可以配置的選項
                            options: {
                                limit: 8192
                                    // limit=8192表示將所有小于8kb的圖片都轉(zhuǎn)為base64形式
                                    // （其實應(yīng)該說超過8kb的才使用 url-loader 來映射到文件，否則轉(zhuǎn)為data url形式）
                            }
                        }]
                    },
                    // 實現(xiàn) ES6轉(zhuǎn) ES5
                    {
                        test: /\.js$/,
                        exclude: /(node_modules)/,  // exclude 排除的意思，把 node_modules文件夾排除編譯之外
                        use: {
                            loader: 'babel-loader',
                            options: {
                            // presets 預(yù)設(shè)列表（一組插件）加載和使用
                            presets: ['env'],
                            plugins: ['transform-runtime'] // 加載和使用的插件列表
                            }
                        }
                    }

把一些代碼改成ES6 語法的寫法

-   ```js
    // main.js
    // 1、獲取index.html中的dom對象
    var first = document.getElementById('first');
    var btn1 = document.getElementById('btn1');
    var two = document.getElementById('two');
    var res = document.getElementById('res');
    console.log(1);
    btn1.onclick = function() {
        var firstValue = parseFloat(first.value);
        var twoValue = parseFloat(two.value);
        //2、獲取 module1.js中的 sum函數(shù)
        //http://www.ruanyifeng.com/blog/2015/05/require.html
        console.log(2);
        /* var sum = require('./module1.js');
         res.value = sum(firstValue,twoValue);*/
        res.value = sumObj.sum(firstValue, twoValue);
    }
    // 3、獲取css目錄中的main.css文件
    // require('../css/main.css');
    //  把步驟3 改為 ES6寫法,引入css目錄中的main.css文件
    import '../css/main.css';
    // 4、獲取sass目錄中的scss1.scss文件
    require('../sass/scss1.scss');
    // 5、獲取less目錄中的less1.less文件
    require('../less/less1.less');
    // 6、獲取src目錄中的mui目錄中icons-extra.css的文件
    require('../mui/css/icons-extra.css');
    // 把 var sum = require('./module1.js'); 寫成 ES6語法
    import sumObj from './module1.js'
    ```

// moudule1.js
function sum(x,y){
    return x + y;
}
// 導出 sum 函數(shù)
// module.exports = sum;
    // 改成ES6 的寫法語法
export default{
    sum
}

10、防止文件緩存（生成帶有20位的hash值的唯一文件）

// webpack.config.js
output: {
        path: path.resolve(__dirname, 'dist/js'), // 指定出口文件的路徑目錄
        // filename: 'bulid.js' // 制定出口文件的名稱
        filename: '[name].[hash].js' // 將入口文件重命名為帶有20位的hash值的唯一文件
    }

11、抽取CSS為單獨文件

安裝插件從 build.js文件中提取文本（CSS）到單獨的文件

npm install --save-dev extract-text-webpack-plugin

在webpack.config.js中配置

const path = require('path'); // 首先要引入node.js中path 模塊，用于處理文件與目錄的路徑
// const 命令聲明一個只讀的常量，一旦聲明，值不可以改變，改變會報錯；只聲明不賦值也會報錯
// 常量存儲的是一個不可以變化的變量。
// 引入html-webpack-plugin 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    entry: './src/./js/main.js', // 指定入口文件
    output: {
        path: path.resolve(__dirname, 'dist'), // 指定出口文件的路徑目錄
        // filename: 'bulid.js' // 制定出口文件的名稱
        // path指定了本地構(gòu)建地址，publicPath指定在瀏覽器中所引用的,指定的是構(gòu)建后在html里的路徑
        // publicPath: './',
        // 將入口文件重命名為帶有20位的hash值的唯一文件
        filename: '[name].[hash].js' 
    },
    module: {
        rules: [
            // 在webpack2中，loaders 被替換成了 rules 其實就是loader的規(guī)則
            //  實現(xiàn) css 打包
            /*{
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
                    // test 說明了當前 loader 能處理那些類型的文件
                    // use 則指定了 loader 的類型。
                    // 注意：數(shù)組中的loader不能省略擴展名
            },*/
            // 實現(xiàn) scss 打包
            {
                test: /\.scss$/,
                // 注意 是sass-loader ，不是 scss-loader
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            // 實現(xiàn) less 打包
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            // 實現(xiàn) url 資源打包
            {
                // 圖片文件使用 url-loader 來處理
                test: /\.(png|jpg|gif|ttf)$/,
                use: [{
                    loader: 'url-loader',
                    // options 為可以配置的選項
                    options: {
                        limit: 8192
                            // limit=8192表示將所有小于8kb的圖片都轉(zhuǎn)為base64形式
                            // （其實應(yīng)該說超過8kb的才使用 url-loader 來映射到文件，否則轉(zhuǎn)為data url形式）
                    }
                }]
               //保證輸出的圖片名稱與之前命名的圖片名稱保持一致(目前只是支持這樣的寫法，                   webpack3 沒有響應(yīng)的options進行配置)
                // use:'url-loader?limit=8192&name=imgs/[name].[ext]' 
            },
            // 實現(xiàn) ES6轉(zhuǎn) ES5
            {
                test: /\.js$/,
                exclude: /(node_modules)/, // exclude 排除的意思，把 node_modules文件夾排除編譯之外
                use: {
                    loader: 'babel-loader',
                    options: {
                        // presets 預(yù)設(shè)列表（一組插件）加載和使用
                        presets: ['env'],
                        plugins: ['transform-runtime'] // 加載和使用的插件列表
                    }
                }
            },
            // 提取 css模塊（如果使用這個模塊的話，需要把之前的CSS打包模塊注釋掉，不然會重復）
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            }
        ]
    },
    devServer: {
        // contentBase: './dist', // 在 localhost:8080(默認) 下建立服務(wù)，將 dist 目錄下的文件，作為可訪問文件  contentBase：告訴服務(wù)器從哪里提供內(nèi)容
        // 或者通過以下方式配置
        contentBase: path.join(__dirname, "dist"),
        port: 9000, // 如果想要改端口，可以通過 port更改
        hot: true, // 啟用 webpack 的模塊熱替換特性()
        inline: true, // 實現(xiàn)實時重載（實現(xiàn)自動刷新功能）默認情況下是 true。
        host: "localhost" // 如果你希望服務(wù)器外部可訪問，指定使用一個 host。默認是 localhost(也就是你可以不寫這個host這個配置屬性)。
    },
    plugins: [
        // 從 bundle 中提取文本（CSS）到單獨的文件      
        new ExtractTextPlugin({
            //  提取css，并重名為帶有 20位的hash值的唯一文件
            filename: '[name].[hash].css',
            // 將所有的獨立文件模塊（這里指的是css文件）合并成一個文件
            allChunks: true
        }),
        new HtmlWebpackPlugin({
            title: '首頁', // 用于生成的HTML文檔的標題
            filename: 'index.html', //寫入HTML的文件。默認為index.html。也可以指定一個子目錄（例如：）assets/admin.html
            template: 'index.html' // Webpack需要模板的路徑
                // template: 'index.ejs' // Webpack需要模板的路徑
        }),
        // 需要結(jié)合webpack-dev-server 啟用熱替換模塊(Hot Module Replacement)，也被稱為 HMR
        new webpack.HotModuleReplacementPlugin()
    ]
}

12、開發(fā)環(huán)境和生產(chǎn)環(huán)境的分離

（1）開發(fā)環(huán)境與生產(chǎn)環(huán)境分離的原因如下：

在開發(fā)環(huán)境中，我們使用熱更新插件幫助我們實現(xiàn)瀏覽器的自動更新功能，我們的代碼沒有進行壓縮，如果壓縮了不方便我們調(diào)試代碼等等，所以以上這些代碼不應(yīng)出現(xiàn)在生產(chǎn)環(huán)境中。
生產(chǎn)環(huán)境中，我們把項目部署到服務(wù)器時，我們會對代碼進行各種各樣的優(yōu)化，比如壓縮代碼等等，這時候我們不應(yīng)該把這些代碼放到開發(fā)環(huán)境中，不利于代碼開發(fā)和調(diào)試。

總結(jié)：針對以上這些說明，我們很有必要把區(qū)分開發(fā)環(huán)境與生產(chǎn)環(huán)境分離。

（2）開發(fā)環(huán)境的配置和生產(chǎn)換環(huán)境配置的區(qū)別。

開發(fā)環(huán)境有的配置，生產(chǎn)環(huán)境不一定有，比如說熱更新時使用到的HotModuleReplacementPlugin。
生產(chǎn)環(huán)境有的配置，開發(fā)環(huán)境不一定有，比如說用來壓縮js用的UglifyJsPlugin。

如何去做？

1> 因為webpack 默認找的是 webpack.config.js配置文件，所以要把開發(fā)環(huán)境的webpack.config.js配置文件改為webpack.dev.config.js代表開發(fā)環(huán)境的配置文件。

2> 新建一個webpack.prod.config.js，再把開發(fā)環(huán)境中的webpack.config.js復制進去（沒用的配置文件該刪除的刪除）

3> 修改package.json文件（在scripts 標簽中添加"dev"和"prod" 屬性配置）

 "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack --config webpack.dev.config.js",
        "prod": "webpack --config webpack.prod.config.js"
    },

怎樣執(zhí)行命令

執(zhí)行開發(fā)環(huán)境的中配置

npm run dev

執(zhí)行生產(chǎn)環(huán)境的中配置

npm run prod

13、在生產(chǎn)環(huán)境中配置代碼壓縮功能

配置webpack.prod.config.js 文件

// webpack.prod.config.js
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
 // ……
   plugins: [
       // ……
        // js代碼 壓縮
        new UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ]

執(zhí)行 npm run prod 命令

四、webpack1和webpack2的區(qū)別

webpack1.0已經(jīng)廢棄使用，建議使用webpack2.0+

1、resolve.modulesDirectories 被重命名為 resolve.modules

2、module.loaders 將繼續(xù)支持，但在未來它將被module.rules 替換。

以上就是webpack安裝配置及使用教程詳解的詳細內(nèi)容，更多關(guān)于webpack安裝配置教程的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

webpack安裝配置及使用教程詳解

目錄

一、webpack介紹

1、由來

2、介紹

3、作用

4、拓展說明

5、webpack整體認知

二、webpack安裝

1、安裝node

2、安裝cnpm

3、安裝nrm的兩種方法

4、安裝webpack

三、webpack配置

搭建項目結(jié)構(gòu)

1、初始化一個項目（會創(chuàng)建一個package.json文件）

2、在當前的項目中安裝Webpack作為依賴包

3、當前項目結(jié)構(gòu)

4、實現(xiàn)CSS打包

5、實現(xiàn)SCSS打包

6、實現(xiàn)Less打包

7、實現(xiàn)打包url資源（圖片、gif、圖標等）功能

使用注意事項

8、Webpack-dev-server結(jié)合后端服務(wù)器的熱替換配置

9、ES6轉(zhuǎn)換為ES5語法

10、防止文件緩存（生成帶有20位的hash值的唯一文件）

11、抽取CSS為單獨文件

12、開發(fā)環(huán)境和生產(chǎn)環(huán)境的分離

13、在生產(chǎn)環(huán)境中配置代碼壓縮功能

四、webpack1和webpack2的區(qū)別

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线 免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

webpack安裝配置及使用教程詳解

目錄

一、webpack介紹

1、由來

2、介紹

3、作用

4、拓展說明

5、webpack整體認知

二、webpack安裝

1、安裝node

2、安裝cnpm

3、安裝nrm的兩種方法

4、安裝webpack

三、webpack配置

搭建項目結(jié)構(gòu)

1、初始化一個項目（會創(chuàng)建一個package.json文件）

2、在當前的項目中安裝Webpack作為依賴包

3、當前項目結(jié)構(gòu)

4、實現(xiàn)CSS打包

5、實現(xiàn)SCSS打包

6、實現(xiàn)Less打包

7、實現(xiàn)打包url資源（圖片、gif、圖標等）功能

使用注意事項

8、Webpack-dev-server結(jié)合后端服務(wù)器的熱替換配置

9、ES6轉(zhuǎn)換為ES5語法

10、防止文件緩存（生成帶有20位的hash值的唯一文件）

11、抽取CSS為單獨文件

12、開發(fā)環(huán)境和生產(chǎn)環(huán)境的分離

13、在生產(chǎn)環(huán)境中配置代碼壓縮功能

四、webpack1和webpack2的區(qū)別

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

一、webpack介紹

1、由來

3、作用

4、拓展說明

1、安裝node

2、安裝cnpm

3、安裝nrm的兩種方法

4、安裝webpack

三、webpack配置

1、初始化一個項目（會創(chuàng)建一個package.json文件）

2、在當前的項目中安裝Webpack作為依賴包

3、當前項目結(jié)構(gòu)

4、實現(xiàn)CSS打包

5、實現(xiàn)SCSS打包

7、實現(xiàn)打包url資源（圖片、gif、圖標等）功能

8、Webpack-dev-server結(jié)合后端服務(wù)器的熱替換配置

9、ES6轉(zhuǎn)換為ES5語法

10、防止文件緩存（生成帶有20位的hash值的唯一文件）

11、抽取CSS為單獨文件

12、開發(fā)環(huán)境和生產(chǎn)環(huán)境的分離

13、在生產(chǎn)環(huán)境中配置代碼壓縮功能

四、webpack1和webpack2的區(qū)別