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') ] }