Open sleepyShen1989 opened 1 year ago
暂时能想到的配置都用上了
npm init -y
npm run dev
npm run build
npm install webpack webpack-cli --save-dev
npm install css-loader style-loader less-loader postcss-loader postcss-preset-env --save-dev
npm install html-webpack-plugin --save-dev
clean: true
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
npm install copy-webpack-plugin --save-dev
npm install babel-loader @babel/core --save-dev
npm install @babel/preset-env --save-dev
npm install webpack-dev-server --save-dev
module.hot.accept('./print.js', callback)
npm install --save-dev mini-css-extract-plugin
include: path.resolve(__dirname, 'src'),
pathinfo: false
npm install webpack-merge --save-dev
// package.json "scripts": { "dev": "webpack serve --config webpack.config.dev.js --open", "build": "webpack --config webpack.config.prod.js", "anal": "webpack --config webpack.config.prod.js --profile --json > stats.json" }, "private": true, "devDependencies": { "@babel/core": "^7.20.2", "@babel/preset-env": "^7.20.2", "babel-loader": "^9.1.0", "copy-webpack-plugin": "^11.0.0", "css-loader": "^6.7.1", "html-webpack-plugin": "^5.5.0", "less-loader": "^11.1.0", "mini-css-extract-plugin": "^2.6.1", "postcss-loader": "^7.0.1", "postcss-preset-env": "^7.8.2", "style-loader": "^3.3.1", "webpack": "^5.74.0", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.11.1", "webpack-merge": "^5.8.0" } // postcss.config.js module.exports = { plugins: [ require('postcss-preset-env') ] } // babel.config.js module.exports = { // presets: [ ["@babel/preset-env", { 参数 } ] ] presets: [ "@babel/preset-env" ] }
// webpack.config.common.js const path = require('path'); const HTMLWebpackPlugin = require('html-webpack-plugin') const { DefinePlugin } = require('webpack') module.exports = { entry: './src/index.js', output: { filename: 'js/main_[contenthash].js', path: path.resolve(__dirname, 'dist'), }, resolve: { extensions: [".js",".json",".ts"], alias: { "@": path.resolve(__dirname, "./src") } }, module: { rules: [ { test: /\.(jpe?g|png|gif|svg)$/i, type: 'asset', generator: { filename: 'assets/[name]_[contenthash:8][ext]' }, parser: { dataUrlCondition: { // 单位字节 maxSize: 10*1024 } } }, { test: /\.(eot|ttf|woff2?)$/i, type: 'asset/resource', generator: { filename: 'assets/[name]_[contenthash:8][ext]' }, }, { test: /\.js$/i, include: path.resolve(__dirname, 'src'), use: { loader: 'babel-loader', } }, ], }, plugins: [ // 插件执行顺序由插件内部的实现决定 new HTMLWebpackPlugin({ // 按需配置是否设置html模版 template: './public/index.html' }), // 配置模版中的变量 new DefinePlugin({ BASE_URL: "'./'" }) ] }; // webpack.config.dev.js const { merge } = require('webpack-merge') const commonConfig = require('./webpack.config.common') module.exports = merge(commonConfig, { mode: 'development', devtool: 'eval-source-map', devServer: { // 模版中使用的当前目录（./）所对应的目录 // 某些资源开发阶段不复制（CopyWebpackPlugin拷贝资源对性能的消耗） // 生产阶段才复制 使用static指定目录 // 默认是 'public' 文件夹，可以用数组来监听多个静态资源目录 // 建议使用绝对路径 // static: { // directory: path.join(__dirname, 'public'), // }, // 想让你的服务器可以被外部访问，像这样指定 // host:'0.0.0.0', // proxy: { // "/api": "http://localhost:8080", // /api/user -> http://localhost:8080/api/user // "/api": { // target: "http://localhost:8080", // pathRewrite: { '^/api': '' }, // /api/user -> http://localhost:8080/user // } // } }, module: { rules: [ { test: /\.css$/i, use: [ 'style-loader', 'css-loader', 'postcss-loader' ], }, { test: /\.less$/i, use: [ 'style-loader', 'css-loader', 'postcss-loader', 'less-loader'], }, ], }, }); // webpack.config.prod.js const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const CopyWebpackPlugin = require('copy-webpack-plugin') const { merge } = require('webpack-merge') const commonConfig = require('./webpack.config.common') module.exports = merge(commonConfig, { mode: 'production', devtool: 'source-map', output: { clean: true, // 取消输出的 bundle 中生成路径信息（性能） pathinfo: false, }, module: { rules: [ { test: /\.css$/i, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' ], }, { test: /\.less$/i, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'], }, ], }, plugins: [ new CopyWebpackPlugin({ patterns: [ { from: 'public', globOptions: { ignore: [ '**/index.html' ] } } ] }), new MiniCssExtractPlugin() ], optimization: { // **确保** webpack 编译生成的contenthash一致 // 模块标识符 // 默认情况下，当模块解析顺序发生变化，module.id也会随之改变 moduleIds: 'deterministic', // 提取引导模版 // webpack 在入口 chunk 中，包含了某些 boilerplate(引导模板) // 多次构建（在某些版本下）可能会因为引导模版的改变导致contenthash的改变 // 将 runtime 代码拆分为一个单独的 chunk runtimeChunk: 'single', // 将第三方库(library)（例如 lodash 或 react）提取到单独的 vendor chunk 文件中 splitChunks: { cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all', }, }, } }, });
暂时能想到的配置都用上了
TL,DR
npm init -ynpm run devornpm run build可选项
npm init -ynpm install webpack webpack-cli --save-devnpm install css-loader style-loader less-loader postcss-loader postcss-preset-env --save-devnpm install html-webpack-plugin --save-devclean: true<link rel="icon" href="<%= BASE_URL %>favicon.ico">npm install copy-webpack-plugin --save-devnpm install babel-loader @babel/core --save-devnpm install @babel/preset-env --save-devnpm install webpack-dev-server --save-devmodule.hot.accept('./print.js', callback)npm install --save-dev mini-css-extract-plugininclude: path.resolve(__dirname, 'src'),pathinfo: falsenpm install webpack-merge --save-dev