webpack學習（一）

一.entry

entry是webpack打包的入口配置，entry對應的值能夠是字符串，數組，對象；單入口能夠使用字符串、數組、對象，多入口配置則必須使用對象的方式

二.output

output是webpack打包的出口配置，能夠指定文件輸出的路徑path和文件名filename；多入口起點的時候，出口文件名配置須要以佔位符來確保每一個文件具備惟一的名稱，eg：filename='[name].js'

三.mode

模式配置告知webpack使用相應的配置優化，支持development，production；webpack打包的時候能夠使用webpack --mode=production進行參數傳遞。

四.loader

loader 用於對模塊的源代碼進行轉換。webpack默認只支持js，json文件格式。對於css、es六、圖片、vue、jsx等webpack都不能識別，全部須要引入對應的loader對對應格式的文件進行轉換以便webpack來識別。loader支持鏈式調用，調用順序由下到上，由右到左

五.plugins

插件目的在於解決 loader 沒法實現的其餘事。

六.webpack項目搭建（vue）

1）npm i webpack webpack-cli -D安裝webpack依賴。
安裝完了能夠對js文件進行解析，可是卻不能解析es6，要解析es6就須要藉助babel。

2）npm babel-loader @babel/core @babel/preset-env -D安裝babel對應的依賴。
在目錄下建立.babelrc文件，配置preset
{
    "presets": [
        "@babel/preset-env"
    ]
}

配置babel-loader
module: {
    rules: [
        {
            test: /\.js$/,
            use: 'babel-loader'
        }
    ]
}

3)npm i css-loader style-loader less less-loader -D 安裝css對應loader
{
    test：/\.css$/,
    use: [
        'style-loader',
        'css-loader'
    ]
},
{
    test: /\.less$/,
    use: [
        'style-loader',
        'css-loader',
        'less-loader',
    ]
} 
這個方式css和js是編譯打包到一個文件裏面，css樣式以style的方式插入head中，
可是大多數狀況咱們是但願js和css分別獨立打包，這時咱們就須要引入插件
mini-css-extract-plugin把css樣式抽離出來。

npm i mini-css-extract-plugin -D安裝插件。

在webpack.config.js引入

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

loader就不能使用style-loader需引用MiniCssExtractPlugin.loader

plugins: [
   new MiniCssExtractPlugin({
       filename: '[name].css'
    })
]

npm i optimize-css-assets-webpack-plugin -D引入css壓縮插件

const OptimizeCss = require('optimize-css-assets-webpack-plugin');

配置css壓縮plugins
new OptimizeCss({
  assetNameRegExp: /\.css$/g,
  cssProcessor: require('cssnano'),
}),

4)npm i vue-loader vue-template-compiler -D安裝vue依賴loader
{
    test: /\.vue$/,
    use: 'vue-loader'
}

引入vue-loader plugin：

const VueLoaderPlugin = require('vue-loader/lib/plugin');
new VueLoaderPlugin(),

5)npm i html-webpack-plugin -D 安裝html的插件

const HtmlWebpackPlugin = require('html-webpack-plugin');

new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html', // 打包以後的html
    chunks: ['app'], // 依賴的文件
    inject: true,
    minify: {
        html5: true,
        removeAttributeQuotes: true,
        collapseWhitespace: true,
    }
})

6）熱更新