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）热更新