webpack4-1.常见配置
2021-04-30 20:28
标签：extern post github 执行命令 防止 方法 并发 挂载 lint 参看：文档地址 视频地址：https://www.bilibili.com/video/av51693431 webpack的作用：代码转换、文件优化、代码分割、模块管理、自动刷新、代码检验、自动发布 postcss.config.js 打包 JS CSS 压缩优化： cnpm i eslint eslint-loader -D 官方配置地址 => 以依赖于 cnpm i jquery -S 配置： 防止在模块中多次 在 webpack4-1.常见配置 标签：extern post github 执行命令 防止 方法 并发 挂载 lint 原文地址：https://www.cnblogs.com/houfee/p/12150148.html2 webpack 常见配置
2.1 安装
npm init -y
cnpm i webpack webpack-cli -D
# 版本
# "webpack": "^4.41.4"
# "webpack-cli": "^3.3.10"
# webpack 打包命令
npx webpack
2.2 配置
// webpack.config.js
const path = require(‘path‘)
module.exports = {
mode: ‘development‘, // development production(该模式下回自动压缩代码)
entry: path.join(__dirname, ‘./src/index.js‘),
output: {
filename: ‘bundle.[hash:8].js‘,
path: path.join(__dirname, ‘./build‘),
}
}
2.2.1 自定义打包配置文件
// webpack.config.xxx.js
module.exports = {
// ...
}
// 执行命令
// npx webpack --config webpack.config.xxx.js
2.2.2 配置脚本
{
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js --colors",
"build": "webpack --config webpack.config.js --colors"
}
}2.3 常用插件
webpack-dev-servercnpm i webpack-dev-server -DdevServer: {
port: 8081,
progress: true, // 进度条
contentBase: ‘./build‘, // 指定 build 文件夹作为静态服务
compress: true // 压缩文件
}
html-webpack-plugin - 打包 html 页面：cnpm i html-webpack-plugin -Dconst HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
template: ‘./src/index.html‘,
filename: ‘index.html‘,
minify: {
removeAttributeQuotes: true, // 删除双引号
collapseWhitespace: true // 折叠空行
},
hash: true // 添加 hash 戳
})
]
// ...
}
css less loader 配置cnpm i css-loader less less-loader mini-css-extract-plugin postcss-loader style-loader url-loader -Dconst MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
// ...
plugins: [
new MiniCssExtractPlugin({
filename: path.posix.join(‘static‘, ‘css/[name].[contenthash].css‘),
// disable: false, //是否禁用此插件
// allChunks: true,
// publicPath: ‘‘,
options: {
insert: ‘head‘
}
})
],
module: {
rules: [
{ // css
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// localIdentName:‘[name]-[local]-[hash:base64:6]‘,
publicPath: ‘../../‘
}
},
{
loader: ‘css-loader‘,
options: {
url: true,
modules: {}
}
},
‘postcss-loader‘
]
},
{ // less
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: ‘../../‘
}
},
{
loader: ‘css-loader‘,
options: {}
},
‘less-loader‘,
‘postcss-loader‘
]
},
]
}
// ...
}
module.exports = {
plugins: {
‘autoprefixer‘: {
overrideBrowserslist: ‘last 5 version‘
}
}
}
postcss-loader 配合autoprefixer给样式加前缀。const OptimizeCSSAssetsPlugin = require(‘optimize-css-assets-webpack-plugin‘) // 用于优化\最小化CSS
const TerserJSPlugin = require(‘terser-webpack-plugin‘) // js 压缩
module.exports = {
// ...
optimization: {
minimize: true,
minimizer: [
new TerserJSPlugin({
cache: true, // 是否缓存
parallel: true, // 并发打包
sourceMap: true,
}),
new OptimizeCSSAssetsPlugin({
cssProcessorPluginOptions: {
preset: [‘default‘, { discardComments: { removeAll: true } }],
},
cssProcessorOptions: {
safe: true
}
})
]
},
// ...
}
2.4
ES6 语法转换cnpm i @babel/preset-env @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -Dcnpm i @babel/runtime -S@babel/polyfill 已弃用，参看：core-js@3带来的惊喜、corejsrequire("core-js-pure/stable")
require("regenerator-runtime/runtime")
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
use: {
loader: ‘babel-loader‘,
options: {
presets: [ // 预设
["@babel/preset-env", {
"useBuiltIns": "usage",
"targets": {
"chrome": "58",
"ie": "11"
}
}]
],
plugins: [
[‘@babel/plugin-proposal-decorators‘, {‘legacy‘: true}], // 装饰器
[‘@babel/plugin-proposal-class-properties‘, {‘loose‘: true}], // Class
"@babel/plugin-transform-runtime"
]
}
},
include: path.resolve(__dirname, ‘src‘),
exclude: /node_modules/
},
]
}
// ...
}
2.5 代码规范
// webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
enforce: ‘pre‘, // previous post，在mormal loader 前置执行
use: {
loader: ‘eslint-loader‘,
options: {
cache: true,
fix: true // ESLint自动修复功能
}
},
enforce: ‘pre‘, // previous post
exclude: /node_modules/
}
]
}
// ...
}
Rules Configuration// .eslintrc.json
{
"parserOptions": {
"ecmaVersion": 11,
"sourceType": "module",
"ecmaFeatures": {
"globalReturn": true
}
},
"rules": {
},
"env": {
"node": true,
"commonjs": true,
"es6": true
}
}
2.6 第三方模块使用
jquery 为类，将module中的模块挂载到window上。
// expose-loader 暴露全局的loader/内联的loader 到 window上
import $ from ‘expose-loader?$!jquery‘
// pre 前面执行的loader normal--普通loader/内联loader/后置post-loader
console.log(‘window.$‘,window.$) // 类似于 CDN 引入文件
import $ from ‘jquery‘
console.log(‘window.$‘,window.$)
// webpack.config.js
module.exports = {
// ...
module: {
rules: [
{ // 将 jquery 暴露给 window
test: require.resolve(‘jquery‘),
use: ‘expose-loader?$‘
}
]
}
// ...
}
$ 对象，不打包jquery：console.log(‘$‘, $) // 在模块中使用，但是 $ 不存在window中
// webpack.config.js
module.exports = {
// ...
plugins: [
new Webpack.ProvidePlugin({ // 在每个模块注入 $ 对象
"$": "jquery"
})
]
// ...
}
CDN 引入：import jquery，导致打包体积变大：// webpack.config.js
module.exports = {
// ...
externals: { // 不打包 jquery
jquery: ‘jquery‘
}
// ...
}
2.4
webpack打包图片js中生成图片、在css插入图片、在html中插入图片// webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: {
loader: ‘url-loader‘,
options: {
name: path.posix.join(‘static‘, ‘img/[name].[hash:7].[ext]‘),
esModule: false,
limit: 5 * 1024,
// outputPath: ‘img/‘,
// name: ‘[name].[hash:7].[ext]‘,
// publicPath:‘img/‘
// publicPath: ‘http://www.houfee.top/‘ // 只为打包的图片添加 地址路径
}
}
},
]
}
// ...
}