webpack打包配置和常用命令

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //css抽出
const optimizeCss = require('optimize-css-assets-webpack-plugin'); //css压缩
const HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html的插件

module.exports = {
  mode: 'production',
  entry: {
    app: './src/app.js',
	style1: './src/style.js',
    //vendors: './src/vendors.js'
  },
  output: {
    filename: 'js/[name].js',
    path: __dirname + '/dist'
  },

    // 模块对象
    module: {
        // 规则
        rules: [
            { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
            {
                test: /\.(jpg|jpeg|gif|png)$/,
                use: 'url-loader?limit=1024&name=img/[name].[ext]',
            },
			{
				// 处理 字体文件的 loader
				test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader?limit=1024&name=fonts/[name].[ext]'
			}

        ]

    },

    plugins: [
      new optimizeCss(),
      new MiniCssExtractPlugin({
      　　filename: "css/[name].css",
     　　 chunkFilename: "[name].css"
   　　 }),

	  new HtmlWebpackPlugin({
            favicon: './src/img/favicon.ico',      //图标
            template: './src/index.html',      //指定要打包的html
            filename: 'index.html',       //指定输出路径和文件名
            minify: {       //压缩
                removeComments: true,       //移除HTML中的注释
                collapseWhitespace:true,        //删除空白符与换行符
                removeAttributeQuotes: true        //去除属性引用
            }
        }),
        // new HtmlWebpackPlugin(//打包第二个页面
        //     {
        //         template: './app/src/page/index2.html',
        //         filename:'./page/index2.html'
        //     }
        // )


    ],


};

cnpm install webpack@4.44.2 --save-dev
cnpm install clean-webpack-plugin -g
cnpm install url-loader --save-dev
cnpm install file-loader --save-dev

bootstrap.min.css报错
npm install bootstrap@3

打包命令：webpack -p