Webpack4

引入Webpack管理工具的緣由

項目打包上線的時候，須要咱們將ES6語法轉化成ES5語法，scss語法轉化成瀏覽器能識別的css文件，jQuery語法轉化成爲js文件，vue文件轉化成js文件，將各類開發環境的文件壓縮成壓縮文件，提升項目運行速度。模塊化使咱們將複雜的項目細化爲小的文件。webpack好處，當css語法前有爲了兼容的前綴你記不住，webpack打包上線的時候會自動幫你添加前綴。

安裝Webpack

建議項目安裝，因爲webpack不斷更新因此安裝到全局會影響新版本的安裝失敗。給項目形成沒必要要的困惑。
步驟以下：

1.安裝node，全局安裝便可
2.進入項目
3.npm init生成package.json文件
4.npm install webpack webpack-cli --save dev（使用4以上版本才裝cli）
5.若是是mac版本，應該在命令前面添加sudo
6.webpack -v
7.安裝完成以後，不少須要的包會在node_modules包管理工具中，此時再用webpack -v查看webpack版本號就很差使了，由於此時webpack在項目中的node_modules文件夾中。全局查看版本找不到。

創建webpack.config.js文件

有關webpack配置的文件都須要在這裏面填寫
const path=require("path");
module.exports={
    mode:'production',//生產環境下
    mode:'development',//開發環境下
    entry:{//入口配置文件
        XX:'./src/index.js'
    },
    output:{//出口配置文件
        path:path.resolve(__dirname,'./dist')
        //path下有不少方法
        filename:'[name].js'//文件的名字
    }
    module:{}//模塊解讀css，圖片如何壓縮
    plugins：[],//插件用於生產模板和各項功能
    devSever:{}//配置webpack開發服務功能
    
}

在package.json文件下配置咱們的命令

"scripts":{
    'build':'webpack',
}
運行命令的時候，寫的是build就是npm run build

建立webpack熱服務

1.安裝webpack-dev-server，安裝完成以後在package.json中找到devDependencies查看是否有webpack-dev-server的版本號。
2.在webpack.config.js文件中配置
//配置webpack開發服務功能
devServer:{
    contentBase:path.resolve(__dirname,'./dist'),
    //設置基本目錄結構
    host:'127.0.0.1',
    //服務器的IP地址，也能夠寫localhost
    port:8081,
    compress:true//服務器壓縮是否開啓
    open:true//自動打開頁面
    hot:true
    //實時局部刷新
}
3.packjson文件中配置
"scripts":{
    'build':'webpack',
    'dev':'webpack-dev-server'
}
4.建立熱更新最後要引入插件
在webpack.config.js文件中配置
plugins[
    new webpack.HotModuleReplacementPlugin()
]

HTML打包

1.安裝插件
npm install html-webpack-plugin --save dev
npm安裝完成以後至關於被安裝到了node_modules中，因此在使用時，應當將其引入到webpack.config.js文件中
const HtmlWebpackPlugin=require("html-webpack-plugin");
plugins[
    new webpack.HotModuleReplacementPlugin(),
    new webpack.HtmlWebpackPlugin({
        minify:{
            removeAttributeQuotes:true
            //去掉屬性的雙引號
            collapseWhitespace: true
            //摺疊空白區域
        },
        hash:true,
        //爲了js中有緩存效果
        template:'./src/index.html'
        //要打包的html模板和路徑名稱
    })
]

多頁面應用打包

SPA單頁面應用

當每一個html文件對應不一樣的js文件的時候，能夠在webpack.config.js文件中，配置new webpack.HtmlWebpackPlugin中添加
{
    filename:'b.html'
    chunks：['index']
    //對應的js文件名稱
    title:'index-title'
    //修改html文件的title
}

CSS打包

1.在入口js文件中 import css from './css/index.css'
2.下載插件：
style-loader:用來處理css文件中的url，將url掛載到js文件中
css-loader:用來將css插入到頁面的style標籤中
npm install --save-dev style-loader
npm install --save-dev css-loader
3.在webpack.config.js文件中配置
module:{
    rules:[
        {
            test:/\.css$/,
           //過濾文件以.css結尾的文件 use:['style-loader','css-loader']
            //利用style-loader和css-loader來解析文件
        }
    ]
}

CSS文件打包時和js文件分離

有時咱們不但願打包後的文件js和css在一個文件裏，因此將其分離

1.引用插件 
在webpack.config.js文件中引入
const ExtractTextPlugin=require("extract-text-webpack-plugin")
2.安裝 npm install --save-dev extract-text-webpack-plugin@next
以最新版本安裝
3.配置
module:{
    rules:[
        {
            test:/\.css$/,
           //過濾文件以.css結尾的文件 use:ExtractTextPlugin.extract({
               fallback:'style-loader',
               use:'css-loader'
           })
            //利用style-loader和css-loader來解析文件
        }
    ]
}
plugins[
    new ExtractTextPlugin("css/index.css")
]
css文件會自動關聯html中

將CSS中的圖片打包

1.安裝npm install --save-dev file-loader url-loader
2.配置
module:{
    rules:[
    {
        test:/\.css$/,
       //過濾文件以.css結尾的文件 use:['style-loader','css-loader']
        //利用style-loader和css-loader來解析文件
    },
        {
        test：/\.(png|jpg|gif)/,
        // test:/\.(png|jpg|gif)/ 是匹配文件的後綴
        use:[{
                loader:'url-loader',
                //指定loader的配置參數
                options:{
                    limit:500,
                    outputPath：'images/'
                }
            }]
        }
    ]
}

html中的圖片打包

https://github.com/wzsxyz/html-withimg-loader
module:{
    rules:[
        {
        test:/\.(htm|html)$/i
        loader:'html-withimg-loader'
        }
    ]
}