区分环境打包
npm install webpack-merge -D
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const rootDir = process.cwd();
module.exports = {
entry: path.resolve(rootDir, 'src/index.js'),
output: {
path: path.resolve(rootDir, 'dist'),
filename: 'bundle.[contenthash:8].js',
},
module: {
rules: [
{
test: /\.(jsx|js)$/,
use: 'babel-loader',
include: path.resolve(rootDir, 'src'),
exclude: /node_modules/,
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(rootDir, 'public/index.html'),
inject: 'body',
scriptLoading: 'blocking',
}),
],
}
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base');
module.exports = merge(baseConfig, {
mode: 'development',
devtool: 'eval-cheap-module-source-map',
devServer: {
port: '3001',
hot: true,
stats: 'errors-only',
compress: true,
proxy: {
'/api': {
target: 'http://0.0.0.0:80',
pathRewrite: {
'/api': '',
},
},
},
},
});
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base');
module.exports = merge(baseConfig, {
mode: 'production',
devtool: 'hidden-source-map',
});
"scripts": {
"dev": "webpack serve --config build/webpack.dev.js --open",
"build:pro": "npx webpack --config build/webpack.pro.js",
},
配置 babel
npm install babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
npm install @babel/runtime @babel/runtime-corejs3 -s
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.[contenthash:8].js',
},
module: {
rules: [
{
test: /\.(jsx|js)$/,
use: 'babel-loader',
exclude: /node_modules/,
},
]
}
}
自动引入打包产物
npm install html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './public/index.html'),
inject: 'body',
scriptLoading: 'blocking',
}),
]
}
清除上次构建产物
npm install clean-webpack-plugin -D
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(rootDir, 'public/index.html'),
inject: 'body',
scriptLoading: 'blocking',
}),
new CleanWebpackPlugin(),
],
}
配置css
npm install less style-loader css-loader less-loader -D
module.exports = {
module: {
rules: [
{
test: /\.(le|c)ss$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader', 'less-loader']
},
]
},
}
module.exports = {
module: {
rules: [
{
test: /\.(le|c)ss$/,
exclude: /node_modules/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
compileType: 'module',
localIdentName: "[local]__[hash:base64:5]",
},
},
},
'less-loader'
]
},
]
},
}
npm install autoprefixer postcss postcss-loader -D
const autoprefixer = require('autoprefixer');
module.exports = {
module: {
rules: [
{
test: /\.(le|c)ss$/,
exclude: /node_modules/,
use: [
'less-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
["autoprefixer"],
],
},
},
}
]
},
]
},
}
npm install mini-css-extract-plugin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
module: {
rules: [
{
test: /\.(le|c)ss$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css',
}),
],
}
npm install optimize-css-assets-webpack-plugin -D
const OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css',
}),
new OptimizeCssPlugin(),
],
}
复制项目资源到打包目录
const CopyWebpackPlugin = require('copy-webpack-plugin');
const rootDir = process.cwd();
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(rootDir, 'public/index.html'),
inject: 'body',
scriptLoading: 'blocking',
}),
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [
{
from: '*.js',
context: path.resolve(rootDir, "public/js"),
to: path.resolve(rootDir, 'dist/js'),
},
],
})
new MiniCssExtractPlugin({
filename: 'css/[name].css',
}),
new OptimizeCssPlugin(),
],
}
解析图片等资源
asset/resource:发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
asset/inline:导出一个资源的 data URI。之前通过使用 url-loader 实现。
asset/source:导出资源的源代码。之前通过使用 raw-loader 实现。
asset:在导出一个 data URI 和发送一个单独的文件之间自主选择。之前通过使用 url-loader,并且配置资源体积限制实现。
自动地在 resource 和 inline 之间进行选择:小于 8kb 的文件,将会视为 inline 模块类型,否则会被视为 resource 模块类型。
作者:WangHaoyu
链接:https://www.zhihu.com/question/39290543/answer/2304546396
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
const path = require('path');
module.exports = {
entry: {
main: path.resolve(__dirname, '../src/packages/home/index.tsx'),
},
module: {
rules: [
{
test: /\.(png|jpe?g|svg|gif)$/,
type:'asset/inline'
},
{
test: /\.(eot|ttf|woff|woff2)$/,
type: 'asset/resource',
generator: {
filename: 'fonts/[hash][ext][query]',
},
},
],
},
};
配置TypeScript
npm install --save-dev @babel/preset-typescript
tsc --init 命令初始化 tsconfig.json
{
"presets": [
"@babel/preset-env",
+ "@babel/preset-typescript"
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"regenerator": true
}
]
]
}
const path = require('path');
module.exports = {
entry: {
main: path.resolve(__dirname, '../src/packages/home/index.tsx'),
},
module: {
rules: [
{
test: /\.(t|j)s?$/,
use: 'babel-loader',
},
],
},
};
配置prettier&eslint
yarn add --dev --exact prettier
yarn add eslint --dev
yarn add -D eslint-config-prettie
npx eslint --init
module.exports = {
printWidth: 100,
tabWidth: 2,
semi: false,
singleQuote: true,
jsxSingleQuote: true,
trailingComma: 'es5',
arrowParens: 'avoid',
htmlWhitespaceSensitivity: 'css',
}
***.min.css
.idea/
node_modules/
dist/
build/
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"prettier"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {
}
};
*.d.ts
scripts