笔记 | 一些常用的 webpack 配置
2023-06-13 09:12:50 时间
webpack
官网
示例代码
官网
初始化 npm
仓库
npm init -y
安装 webpack
yarn add -D webpack
yarn add -D webpack-cli
yarn add -D webpack-dev-server
初始化 webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
安装必备 loader
yarn add -D html-webpack-plugin # HTML
yarn add -D css-loader # CSS
yarn add -D mini-css-extract-plugin
- yarn add -D style-loader
- yarn add -D css-minimizer-webpack-plugin
- optimize-css-assets-webpack-plugin
yarn add -D file-loader # FILE
yarn add -D sass-loader sass webpack # SASS
yarn add -D stylus stylus-loader # STYLUS
yarn add -D less less-loader # LESS
webpack.config.base.js
const path = require('path');
// 以下可选
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 以上可选
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, "public"), // 要输出的目录
filename: "[name].[contenthash].js", // 文件名
clean: true,
},
optimization: {
runtimeChunk: 'single',
},
// 以下可选
plugins: [new HtmlWebpackPlugin(
{
title: 'Webpack Demo',
template: 'src/assets/index.html'
})],
// 以上可选
module: {
rules: [
{ // SASS Loader
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
{ // LESS loader
test: /\.less$/i,
use: [
// compiles Less to CSS
"style-loader",
"css-loader",
"less-loader",
],
},
{ // STYLUS loader
test: /\.styl$/,
use: ["style-loader", "css-loader", "stylus-loader"],
},
{ // FILE loader
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: "file-loader",
options: {
name: "[path][name].[contenthash].[ext]",
},
},
],
},
],
},
};
开发环境
const base = require('./webpack.config.base.js');
module.exports = {
...base,
devtool: 'inline-source-map',
devServer: {
static: './dist',
},
mode: "development", // "production" | "development" | "none"
module: {
rules: [
...base.module.rules,
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
}
};
生产环境
- (官网方法)
yarn add -D mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const base = require('./webpack.config.base.js');
module.exports = {
...base,
mode: "production", // "production" | "development" | "none"
module: {
rules: [
...base.module.rules,
{
test: /.s?css$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
],
},
optimization: {
minimizer: [
// For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
// `...`,
new CssMinimizerPlugin(),
],
},
plugins: [
...base.plugins,
new MiniCssExtractPlugin(
{
filename: "[name].[contenthash].css",
chunkFilename: "[id].[contenthash].css",
ignoreOrder: false,
}
)
],
};
- css 压缩的 另一种方法
yarn add optimize-css-assets-webpack-plugin --dev
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const base = require('./webpack.config.base.js');
module.exports = {
...base,
mode: "production", // "production" | "development" | "none"
module: {
rules: [
...base.module.rules,
{
test: /\.css$/i,
use: [{
loader: MiniCssExtractPlugin.loader, // 抽离 CSS
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: "../",
},
},
"css-loader"], // 将 CSS 变成字符串
},
],
},
plugins: [
...base.plugins,
new MiniCssExtractPlugin( // 抽离 CSS
{
filename: "[name].[contenthash].css",
chunkFilename: "[id].[contenthash].css",
ignoreOrder: false,
}),
new OptimizeCSSAssetsPlugin({}) // 压缩 CSS
],
};
package.json
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.prod.js",
"start": "webpack serve --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.7.1",
"css-minimizer-webpack-plugin": "^4.0.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"less": "^4.1.3",
"less-loader": "^11.0.0",
"mini-css-extract-plugin": "^2.6.1",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"sass": "^1.54.0",
"sass-loader": "^13.0.2",
"style-loader": "^3.3.1",
"stylus": "^0.58.1",
"stylus-loader": "^7.0.0",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
}
}
相关文章
- pycharm安装2021_idea环境配置
- windows下安装MinGW及C++的环境配置
- webpack和vue cli_vuecli webpack配置
- 入门webpack的最佳实践(基于webpack4.X 5.X)-- 打包配置优化
- webpack生产、开发公共配置拆分
- webpack异步加载_webpack配置按需加载
- qnap系统安装_snailsvn安装配置教程
- 操作教程:如何通过远程操作来配置EasyNVR硬件的https?
- webpack高级配置_2023-03-01
- Webpack配置信息入门
- webpack原理(2):ES6 module在Webpack中如何Tree-shaking构建
- Oracle 参数 HEAT_MAP 官方解释,作用,如何配置最优化建议
- MySQL 配置高效的日志系统(mysql配置日志)
- Linux 内核配置:实现极致的自定义性(linux内核配置选项)
- 轻松学习:如何在Linux上配置二级域名(linux配置二级域名)
- Apple等终端邮箱配置,以iphone终端为例
- redis安装、配置、使用和redisphp扩展安装教程