webpack4之后webpack5又做了蛮多的变化,这里简单介绍一下webpack5的配置 可以参考官网
mkdir react-cli cd react-cli npm init 初始化package.json npm install webpack webpack-cli --save-dev 现在我们将创建以下目录结构、文件和内容:![](/i/l/?n=22&i=blog/823433/202209/823433-20220926115615363-247590255.png)
//index.js
import './index.css' function component() { const element = document.createElement('div'); // lodash(目前通过一个 script 引入)对于执行这一行是必需的 element.innerHTML = "<div class='demo'>322222是www一个demo332222222222dddd</div>"; return element; } document.body.appendChild(component());
下面介绍一下package.json
"scripts": { "dev": "webpack server --config scripts/dev.js", "build": "webpack --config scripts/build.js", "server": "serve ./build -p 5000" },
然后介绍一下dev.js,我这里使用merga合并两个配置
const path=require('path'); const common = require('../webpack.config.js'); const { merge } =require('webpack-merge'); const webpack =require('webpack'); const webpackDevServer = require('webpack-dev-server'); const isDev = process.env.NODE_ENV === 'development'; const publicPath = !isDev ? './' : (isDev && '/'); module.exports= merge(common,{ mode: 'development', devtool: 'inline-source-map', devServer:{ static: { directory: path.join(__dirname, '../dist'), }, compress: true, open: true, devMiddleware: { publicPath: '/', }, } })然后看一下webpack.config.js文件
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const isDev = process.env.NODE_ENV === 'development'; const resolve =(pathName) => path.resolve(__dirname,pathName); const publicPath = !isDev ? './' : (isDev && '/'); module.exports = { mode: isDev ? 'development' : 'production', entry: path.resolve(__dirname, './src/index.js'), output: { path: path.join(__dirname, !isDev ? './build' : './dist'), filename: !isDev ? 'js/[name].[contenthash:8].js' : 'js/[name].js', chunkFilename: !isDev ? 'js/[name].[contenthash:8].chunk.js' : 'js/[name].chunk.js', publicPath }, module: { rules: [ { test: /\.(js|jsx|ts|tsx)?$/, use: [ { loader: 'babel-loader' }, ], }, { test: /\.css$/i, use: ['style-loader', 'css-loader'] }, { test: /\.(png|jpe?g|gif|webp|bmp|woff2?|eot|ttf|otf)$/, type: 'asset', parser: { dataUrlCondition: { maxSize: 4 * 1024 // 默认配置是8kB } } }, ] }, plugins: [ new HtmlWebpackPlugin({ template:resolve('./index.html'), inject: true, }) ], resolve: { extensions: ['.json', '.js', '.jsx', '.ts', '.tsx'], alias: { '@': resolve('../src'), } }, optimization: { splitChunks: { chunks: 'all',//移除重复的依赖模块 } } }最后看一下build.js
const path=require('path'); const common = require('../webpack.config.js'); const { merge } =require('webpack-merge'); module.exports = merge(common,{ mode: 'production', devtool: false, })以上只是webpack5简单的配置,代码压缩后面在介绍 官网上还有一种通过Node.js api的方式进行配置
const path = require('path'); const common = require('../webpack.config.js'); const { merge } = require('webpack-merge'); const webpack = require('webpack'); const webpackDevServer = require('webpack-dev-server'); const isDev = process.env.NODE_ENV === 'development'; async function initDevServer() { const options = { static: { directory: path.join(__dirname, '../dist'), }, devMiddleware: { publicPath: '/', writeToDisk: false, }, open: true, allowedHosts: 'all' } common.mode = "development" const compiler = webpack(common); const devServer = new webpackDevServer(options, compiler); (async () => { await devServer.start(); console.log(`Dev server started \n`); })(); } initDevServer(); //"dev": "node scripts/dev.js",
标签:isDev,webpack5,const,require,配置,js,webpack,简单,path From: https://www.cnblogs.com/zhihou/p/16730364.html