webpack学习笔记

const path = require('path')

//进度条
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const chalk = require('chalk');

// 以树图的方式展示打包后的文件
//const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

//输出html
const HtmlWebpackPlugin = require('html-webpack-plugin')

//抽离css插件 
const MiniCssExtractPlugin = require("mini-css-extract-plugin") 

//清空dist
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
    mode: 'production', //模式  production :生产环境    development :开发环境
    entry: './src/main.js', //入口文件
    output:{ //输出路径
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist') //设置输出路径 dist
    },
    devServer:{ //开发服务配置
        port:3112,
        progress:true,
        contentBase:'./dist',
        compress: true
    },
    devtool:'inline-source-map', //提示：追踪错误和警告
    module:{ //允许指定多个loader
        rules:[  //模块筛选
            {test: /\.css$/, use:[MiniCssExtractPlugin.loader,"css-loader","postcss-loader"]},
            {test: /\.less$/, use :[MiniCssExtractPlugin.loader,"css-loader","postcss-loader","less-loader"]},
            {test: /\.scss$/, use :[MiniCssExtractPlugin.loader,"css-loader","postcss-loader","sass-loader"]},
            {
                test:/\.(png|jpg|gif)$/,
                use:[{
                    loader:'url-loader',
                    options:{ 
                        limit:50000, //限制
                        outputPath:'images/' //输出路径
                    }}
                ]
            }
        ]
    },
    plugins:[ //插件
        new HtmlWebpackPlugin({ 
            title:"lxl webpack demo",
            filename: 'index.html', //输出后的文件名
            template: path.resolve(__dirname,'./public/index.html'), //指定引用模板
            hash:true
        }),
        new CleanWebpackPlugin(), //清楚dist
        new ProgressBarPlugin({  // 显示进度
            format: chalk.green('Progressing') +  '[:bar]' + chalk.green(':percent') + '(:elapsed seconds)',
            clear: false
        }),
        new MiniCssExtractPlugin({ //分离css 
            filename:'main.css' //指定输出后的文件名
        })
        // new BundleAnalyzerPlugin()
    ]

}

 package.json

{
  "name": "lxl-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --open --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.7.1",
    "chalk": "^3.0.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.13.0",
    "postcss-cssnext": "^3.1.0",
    "postcss-loader": "^3.0.0",
    "progress-bar-webpack-plugin": "^1.12.1",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "url-loader": "^2.2.0",
    "webpack": "^4.41.2",
    "webpack-bundle-analyzer": "^3.6.0",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

 postcss.config.js  

//处理 css兼容前缀
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
  }