webpack 配置解析

webpack.config.js配置解析：

const path = require('path');

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

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

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

 

const NODE_ENV = process.env.NODE_ENV;

let config = {

//mode: 'development', // development为开发者环境，production为生产环境变量 ，还有一个为none

entry: {

main: "./app.js",//main模块输入地址

print: "./pages/print.js"//print模块输入地址

},

output: {

path: path.resolve(__dirname, 'dist'),//输入地址

filename: "[name].[chunkhash].bundle.js",//输出名称

publicPath: '/'

},

module: {

rules: [//规则

{

test: /\.(png|svg|jpg|gif)$/, use: ['file-loader']

},

{

test: /\.css$/, use: [

{

loader: MiniCssExtractPlugin.loader,

options: {

publicPath: './',

},

},

// "style-loader",

"css-loader"

]

},

{ test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] }

]

},

plugins: [//插件

new MiniCssExtractPlugin({

filename: '[name].css',

chunkFilename: '[id].css',

}),

new HtmlWebpackPlugin({

title: 'Output Management'

}),

new CleanWebpackPlugin(),

],

devServer: {

contentBase: './dist'

},

};

if (process.env.NODE_ENV == 'development') {

config.devtool = 'inline-source-map';

}

 

module.exports = config;//config也可以是一个数组