webpack打包流程 面试如果打包的时候以下错误，说明漏掉这⼀步：
ming@ming-TM1604:/home/wwwroot/ming/wb2$ webpack --config=conf/webpack.dev.js
/usr/local/lib/node_modules/webpack-cli/bin/cli.js:244
throw err;
^
Error: Cannot find module 'webpack/lib/Chunk'
at Function.Module._resolveFilename (module.js:543:15)
at Function.Module._load (module.js:470:25)
quire (module.js:593:17)
配置⽂件./conf/webpack.dev.js:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require("path");
mode: "development", //打包为开发模式
entry: "./src/main", //⼊⼝⽂件，从项⽬根⽬录指定
output: { //输出路径和⽂件名，使⽤path模块resolve⽅法将输出路径解析为绝对路径
path: solve(__dirname, "../dist/js"), //将js⽂件打包到dist/js的⽬录
filename: "main.js"
},
module: {
rules: [
{
test: /\.css$/,
use: act({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("../css/styles.css") //默认其实⽬录问打包后的⼊⼝⽂件路径，所以需要../
]
}
打包完成后会在dist⽬录下⽣成css/styles.css⽂件
注：由于与webpack4兼容性问题，打包会提⽰Entrypoint undefined = extract-text-webpack-plugin-output-filename 2.2.使⽤mini-css-extract-plugin插件
配置⽂件./conf/webpack.dev.js:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
mode: "development", //打包为开发模式
entry: "./src/main", //⼊⼝⽂件，从项⽬根⽬录指定
output: { //输出路径和⽂件名，使⽤path模块resolve⽅法将输出路径解析为绝对路径        path: solve(__dirname, "../dist/js"), //将js⽂件打包到dist/js的⽬录
filename: "main.js"
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: true
}
},
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "../css/styles.css" //如果需要将css⽂件单独放⼊css⽂件夹中需要../
})
]
}
打包完成后也会在dist⽬录下⽣成css/styles.css⽂件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。