webpack學習筆記

1、webpack 安裝和名令行

     一、安裝:

        （1）進入指定目錄

        （2）新建文件夾：終端輸入：mkdir webpack-test

        （3）進入文件夾：終端輸入：cd webpack-test

        （4）文件夾下初始化npm：終端輸入：npm init

        （5）全局裝webpack:終端輸入：npm install webpack -g （注：若是沒有這一步，而直接執行下一步的話，會提示錯誤：webpack: command not found）

        （6）文件夾中裝webpack:終端輸入：npm install webpack --save-dev (參數-g的含義是表明安裝到全局環境裏面，參數--save-dev的含義是表明把你的安裝包信息寫入package.json文件的devDependencies字段中。)

    二、項目操做

        （1）用編輯器打開當前目錄：終端輸入：atom ./ （視頻中老師用的編輯器是atom）

        （2）編輯器中：新建一個目錄，命名爲hello.js

        （3）webpack打包：終端輸入：webpack hello.js hello.bundle.js（前面是要打包的文件名字，後面是打包後的文件名字） 

   三、webpack支持的三種模塊化方式：md，commonJs, es6. require(‘.world.js’)的寫法是commonJs的

   四、webpack天生不支持css類型的文件，若是要處理這種文件，就要依賴Loader.

   五、安裝loader

        （1）終端項目目錄輸入：npm install css-loader style-loader --save-dev

        （2）require('style-loader!css-loader!./style.css');表示引用文件以前，要引入loader

    六、style-loader!cssloader!若是每一個css文件都要寫的話，就很麻煩，能夠經過環境配置來避免這些重複的輸入：

        （1）終端項目目錄輸入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' （aSuncat: css-loader後面不要加！,mac下是單引號''，windows是雙引號""）

     七、每次修改文件，都要從新輸入命令，讓文件自動更新，自動打包，能夠用--watch的參數

        （1）終端項目目錄輸入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch

     八、打包過程的progress 終端輸入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress

    九、引用的模塊 終端項目目錄輸入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-modules

    十、爲何打包模塊的緣由 終端項目目錄輸入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-modules --display-reasons

二：webpack的配置文件

    1. 在文件的根目錄下建立webpack.config.js文件(配置文件是默認的文件名（webpack.config.js）) 

            配置文件不是默認的文件名

               (1). 好比配置文件的文件名爲webpack.dev.config.js

               (2). 在命令行中運行時：webpack --config webpack.dev.config.js

    2. 配置參數

var path = require('path');
module.exports = { 
              entry:'./src/script/main.js',//打包的入口 
              output:{ path: path.resolve(__dirname, 'dist/js'),//打包後的存放路徑 （絕對路徑） 
              filename:'bundle.js'//打包後的文件名 } 
}

或者這樣寫
//var path = require('path');
module.exports = {
    entry:'./src/script/main.js',//打包的入口
    output:{
        // path: path.resolve(__dirname, 'dist/js'),//打包後的存放路徑 （絕對路徑）
        path: __dirname + 'dist/js',
        filename:'bundle.js'//打包後的文件名
    }
}

    3. 在命令行 中運行：webpack  

    4.設置webpack參數

       (1) 在npm腳本文件package.json文件中設置

    (2) 在scripts中添加："webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"

       (3)終端目標文件輸入：npm run webpack

三：webpack配置entry和output

    entry 有三種設置方式：字符串型單個路徑，數組型路徑，對象

        1. 單個路徑：entry:'./src/script/main.js',

  2. 數組路徑：在webpack.config.js文件中，將entry修改成：entry:['./src/script/main.js','./src/script/a.js']

        3. 對象：分爲key和value，key表示 chunk name，value表示真實的entry，此時的entry能夠是單個路徑也能夠是數組路徑。主要應用於多頁面場景

    output

       當entry採用對象設置時，爲了使擁有不一樣chunk name的文件分別打包，須要設置output * 修改filename：filename:'[name]-[chunkhash].js' （注意：此時有三種佔位符能夠選擇。[name]對應chunk name，[hash]本次打包的哈希值，[chunkhash]每個chunk都對應一個哈希值，若是文件被修改，哈希值就隨之變化，若是文件沒有修改，哈希值就保持和上次打包的同樣）

/*
var path = require('path');
module.exports = {
    entry:{
       // main:['./src/script/main.js','./src/script/a.js']
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },
    output: {
        filename: '[name]-[hash].js',
       // path: __dirname + 'dist/js'
        path: path.resolve(__dirname, 'dist/js'),//打包後的存放路徑 （絕對路徑）
    }
}

四：安裝並引用插件

安裝並引用插件
針對每次修改js文件以後，[hash]佔位符就會改變，在index.html引用中，每次都要更改文件名的繁瑣工做，能夠利用插件解決


	1. 命令窗口輸入：npm install html-webpack-plugin --save-dev
	2. 在配置文件webpack.config.js中引用插件：var htmlWebpackPlugin = require('html-webpack-plugin');
	3. 在插件屬性中初始化plugin：
module.exports = {
    plugins:[
        new htmlWebpackPlugin()
    ]
}
	4. 再打包一次：在命令窗口輸入npm webpack run
	5. 生成的index.html文件就能自動引用以前生成的兩個js文件
	6. 讓兩個ndex.html創建聯繫：在plugins的設置中加入模板參數：
module.exports = {
    plugins:[
        new htmlWebpackPlugin({
                template: 'index.html' //此時上下文環境默認在根目錄下
       })
    ]
}
	7. 讓生成的js和html文件放在不一樣的文件夾下：修改output參數
    output:{
        path: path.resolve(__dirname, 'dist'),//打包後的存放路徑
        filename:'js/[name]-[chunkhash].js' //增長一個相對路徑
    },
	8. 插件的其它參數：
plugins:[
        new htmlWebpackPlugin({
            filename:'index-[hash].html', //文件名
            template:'index.html',//傳參，讓兩個html文件創建聯繫
            inject:'head' //讓生成的script標籤放在head標籤仍是body標籤中
        })
    ]

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
    entry:{
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },
    output: {
        filename: 'js/[name]-[hash].js',
        path: path.resolve(__dirname, 'dist'),//打包後的存放路徑 （絕對路徑）
    },
    plugins:[
        new htmlWebpackPlugin({
            filename:'index-[hash].html', //文件名
            template:'index.html',//傳參，讓兩個html文件創建聯繫
            inject:'head' //讓生成的script標籤放在head標籤仍是body標籤中
        })
    ]
}

五：插件的其它參數

plugins:[
        new htmlWebpackPlugin({
            filename:'index-[hash].html', //文件名
            template:'index.html',//傳參，讓兩個html文件創建聯繫
            inject:'head' ,//讓生成的script標籤放在head標籤仍是body標籤中
            title: 'i am back' //html中的title要取到這個值，須要寫成：<title><%= htmlWebpackPlugin.options.title %></title>
       })
    ]

插件參數與調用
<body>
   <!--查看htmlWebpackPlugin下全部參數-->
   <!--JSON.stringify：JSON方法，讓數組或者對象都轉化爲字符串-->
    <% for(var key in htmlWebpackPlugin.files){ %>
        <%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>
    <% }%>

    <% for(var key in htmlWebpackPlugin.options){ %>
        <%= key %> : <%= JSON.stringify(htmlWebpackPlugin.options[key]) %>
    <% }%>

</body>

上線操做
	1. 設置上線地址：在output中添加publicPath屬性
output:{
     publicPath:'http://cdn.com'
}
	2. 壓縮當前生成的html文件：在plugins中添加minify屬性

          minify:{
                removeComments:true,//去掉註釋
                collapseWhitespace:true,//去掉空格、空行
            }
npm插件查詢官網：https://www.npmjs.com/