标签：plugin require 配置 环境 js webpack loader css
图例文件配置
（1）生产环境
yarn add -D webpack-merge
// 生产模式
let webpack = require("webpack");
let { merge } = require('webpack-merge')
let base = require('./webpack.base')
module.exports = merge(base,{
mode: 'production', // 生产模式
plugins: [
new webpack.DefinePlugin({ // 定义变量
NODE_ENV: JSON.stringify('prod')
})
]
})
(2) 开发环境
yarn add -D webpack-merge
// 开发模式
let webpack = require("webpack");
let { merge } = require('webpack-merge') // webpack合并
let base = require('./webpack.base')
module.exports = merge(base, {
mode: 'development', // 生产模式
plugins: [
new webpack.DefinePlugin({ // 定义变量
NODE_ENV: JSON.stringify('dev')
})
]
})
(3) 测试环境
// 开发模式
let webpack = require("webpack");
let { merge } = require('webpack-merge') // webpack合并
let base = require('./webpack.base')
module.exports = merge(base, {
mode: 'production', // 生产模式
plugins: [
new webpack.DefinePlugin({ // 定义变量
NODE_ENV: JSON.stringify('test')
})
]
})
基本配置
- webpack.base.js
// webpack是基于node,所以使用module.exports
const path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin"); // 生成html模板
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 每次打包前,清除dist
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 合并css
// const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin"); // 最新压缩css
const TerserWebpackPlugin = require("terser-webpack-plugin"); // 压缩js 代替uglify 因为uglifyjs不支持es6语法，所以用terser-webpack-plugin替代uglifyjs-webpack-plugin
const webpack = require("webpack"); // 里边有个ProvidePlugin,可以提供全局的变量
const commonCssConfig = [ // 公共的css配置
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
//css兼容性配置
postcssOptions: {
plugins: [[require("postcss-preset-env")()]],
},
},
},
];
// 公共的babel转码器配置
const babelConfig = {
loader: 'babel-loader',
options: {
presets: [
"@babel/preset-env"
],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties"]
]
}
}
// 公共的plugin插件配置
const commonPlugin = [
// html-webpack-plugin
new HtmlWebpackPlugin({
template: "./src/index.html", // 指定模板
filename: "index.html", // 指定输出的文件名
}),
// new HtmlWebpackPlugin({ // 多模板
// template: './src/index.html', // 指定模板
// filename: 'taobao.html', // 指定输出的文件名
// chunks: ['taobao','jd'] // 指定页面引入的js
// }),
// clean-webpack-plugin
new CleanWebpackPlugin(), // 使用这个插件在每次生成dist目录前，先删除dist目录
// mini-css-extract-plugin
new MiniCssExtractPlugin({
// 抽取css放在公共文件夹
filename: "css/[name].[hash:4].css", // 合并css的公共文件
}),
// css-minimizer-webpack-plugin
new CssMinimizerWebpackPlugin(), // 新版压缩css
// terser-webpack-plugin
new TerserWebpackPlugin({
// 压缩js
test: /\.js(\?.*)?$/i, //匹配参与压缩的文件
parallel: true, //使用多进程并发运行
terserOptions: {
//Terser 压缩配置
output: { comments: false },
compress: {
// pure_funcs: ["console.log"], // 去除console.log
},
},
extractComments: true, //将注释剥离到单独的文件中
}),
// 注入全局变量，在全局中使用，不需要引入
new webpack.ProvidePlugin({
$:"jquery"
})
]
module.exports = {
// 老版压缩css
// optimization: {
// minimizer: [new OptimizeCssAssetsWebpackPlugin]
// },
// 模式配置
// mode: "production", // 指定模式，默认是生产模式，开发模式便于查看代码
// 入口配置
entry: "./src/index.js",
// 出口配置
output: {
path: path.resolve(__dirname, "dist"), // __dirname 代表的是根目录 M:\47-webpack-study\01-webpack\dist
filename: "js/[name].[hash:4].js", // 指定输出的文件名 // [name]是动态名字,加上hash值，避免缓存,默认是20位的hash值
/*
hash的作用：
比如第一次打包的时候，文件会被浏览器缓存下来
第二次打包的时候，如果文件名不变，浏览器不会下载最新的代码，所以hash就有作用了
hash也叫做内容hash值，只要内容发生该变，hash就会变,就不会被缓存下来，时刻保持更新的状态
*/
},
// webpack-dev-server配置
devServer: {
host: "localhost", // 主机
port: "9527", // 端口
open: true, // 自动打开
historyApiFallback: true, //找不到页面默认跳index.html
compress: true, //一切服务都启用gzip 压缩
hot: true, //启动热更新
proxy: {
// 代理配置
"/api": {
target: "http:localhost:5000",
changeOrigin: true,
},
},
},
// 装载器配置
module: {
rules: [
{
test: /\.html$/,
use: 'html-withimg-loader', //在html中使用图片的插件
},
{
test: /\.js$/,
use: babelConfig // babel转码器配置
},
{
test: /\.css$/,
use: [...commonCssConfig], // css顺序是从右到左，从下到上
},
{
test: /\.less$/,
use: [...commonCssConfig,'less-loader'], // less顺序是从右到左，从下到上
},
{
test: /\.scss$/,
use: [...commonCssConfig,"sass-loader"], // sass顺序是从右到左，从下到上
},
// {
// test: /\.(jpeg|jpg|png|svg|gif)$/,
// use: {
// loader: 'file-loader', // 默认使用的是es6模块
// options: { // 配置
// esModule: false, // 使用common.js规范
// outputPath: 'images', // 输出的文件目录
// name: 'images/[contenthash:4].[ext]',
// }
// }
// }
{
test: /\.(jpeg|jpg|png|svg|gif)$/,
use: {
loader: 'url-loader', // 默认使用的是es6模块
options: { // 配置
esModule: false, // 使用common.js规范
outputPath: 'images', // 输出的文件目录
name: 'images/[contenthash:4].[ext]',
limit: 20*1024 // 小于20k转为base64
}
}
}
],
},
// 插件配置
plugins: [...commonPlugin],
// 排除第三方包
externals: {
jquery: '$',
}
};
package.json配置如下
"scripts": {
"serve": "webpack serve",
"build:dev": "webpack --config webpack.dev.js", // 开发
"build:test": "webpack --config webpack.test.js", // 测试
"build:prod": "webpack --config webpack.prod.js" // 生产
},
UI展示
- 测试环境
- 开发环境
- 生产环境
标签：plugin,require,配置,环境,js,webpack,loader,css 来源： https://blog.csdn.net/lxs19930928/article/details/121893998
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。