如何配置webpack4打包工具
安装前先npm初始化
npm init-y //初始化
npm addwebpack webpack-cli -D //安装本地
constpath= require('path') // 相对路径变绝对路径
module.exports ={
mode: 'production', // 模式 默认 production development
entry: './src/index', // 入口
output:{
filename: 'bundle.[hash:8].js', // hash: 8只显示8位
path:path.resolve(__dirname, 'dist'),
publicPath: '' // // 给所有打包文件引入时加前缀，包括css，js，img，如果只想处理图片可以单独在url-loader配置中加publicPath
}
}
本地服务
npm add webpack-dev-server -D
devServer: {//开发服务器的配置
port: 3000,
progress: true //滚动条
contentBase: './build' //起服务的地址
open: true //自动打开浏览器
compress：true // gzip压缩
}
复制html
npm add html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [ // 放着所有webpack插件
new HtmlWebpackPlugin({ //用于使用模板打包时生成index.html文件，并且在run dev时会将模板文件也打包到内存中
template: './index.html', //模板文件
filename: 'index.html', //打包后生成文件
hash: true, //添加hash值解决缓存问题
minify: { //对打包的html模板进行压缩
removeAttributeQuotes: true, //删除属性双引号
collapseWhitespace: true //折叠空行变成一行
}
})
]
html-webpack-plugin#options
处理css
npm add css-loader style-loader -D
// css-loader 作用：用来解析@import这种语法
// style-loader 作用：把 css 插入到head标签中
// loader的执行顺序： 默认是从右向左（从下向上）
module: { //模块
rules: [ //规则
// style-loader把css插入head标签中
// loader功能单一
//多个loader 需要[]
//顺便默认从右到左
//也可以写成对象方式
{
test: /\.css$/, // css处理
// use: 'css-loader'
// use: ['style-loader', 'css-loader'],
use: [
// {
// loader: 'style-loader',
// options: {
// insertAt: 'top' //将css标签插入最顶头 这样可以自定义style不被覆盖
// }
// },
MiniCssExtractPlugin.loader,
'css-loader', // css-loader用来解析@import这种语法,
'postcss-loader'
]
}
]
}
处理less
npm add less less-loader -D
{
test: /\.less$/, // less处理
// use: 'css-loader'
// use: ['style-loader', 'css-loader'],
use: [
// {
// loader: 'style-loader',
// options: {
// insertAt: 'top' //将css标签插入最顶头 这样可以自定义style不被覆盖
// }
// },
MiniCssExtractPlugin.loader, //这样相当于抽离成一个css文件， 如果希望抽离成分别不同的css, 需要再引入MiniCssExtractPlugin，再配置
'css-loader', // css-loader用来解析@import这种语法
'postcss-loader',
'less-loader' // less-loader less -> css
// sass node-sass sass-loader
// stylus stylus-loader
]
}
less-loader
抽离css文件，通过link引入
npm addmini-css-extract-plugin -D
mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css
plugins: [
new MiniCssExtractPlugin({
filename: 'css/main.css'
})
]
{
test: /\.css$/, // css处理
// use: 'css-loader'
// use: ['style-loader', 'css-loader'],
use: [
// {
// loader: 'style-loader',
// options: {
// insertAt: 'top' //将css标签插入最顶头 这样可以自定义style不被覆盖
// }
// },
//此时不需要style-loader
MiniCssExtractPlugin.loader, //抽离
'css-loader', // css-loader用来解析@import这种语法,
'postcss-loader'
]
}
抽离css插件文件时可使用optimize-css-assets-webpack-plugin优化压缩css以及js文件
npm add optimize-css-assets-webpack-plugin-D
压缩css和js
npm add optimize-css-assets-webpack-plugin-D
/ 用了`mini-css-extract-plugin`抽离css为link需使用`optimize-css-assets-webpack-plugin`进行压缩css,使用此方法压缩了css需要`uglifyjs-webpack-plugin`压缩js
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
module.exports = {
optimization: { //优化项
minimizer: [
new UglifyJsPlugin({ //优化js
cache: true, //是否缓存
parallel: true, //是否并发打包
// sourceMap: true //源码映射set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({}) // css的优化
]
},
mode: 'production',
entry: '',
output: {},
}