webpack报错ERROR in ./src/js/ 3:0-31 Module not found: Error: Can‘t resolve ‘..解决亲测有效
// css处理引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 输出文件的绝对路径
const { resolve } = require('path')
// css兼容性处理
const PostcssPresetEnv = require('postcss-preset-env')
// css压缩插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// html文件处理
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 提取css兼容性处理的代码为公共代码
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
//修改loader的默认设置
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
PostcssPresetEnv()
]
}
}
}
]
module.exports = {
// 入口文件
entry: './src/js/',
// 文件输出
output: {
// 名称
filename: 'js/',
// 地址
path: resolve(__dirname, 'build')
},
module: {
rules: [
// css文件处理
{
test: /\.css$/,
use: [...commonCssLoader]
},
// less文件处理
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
// js兼容性处理
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {
//core-js的版本
version: 3
},
//需要兼容的浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
},
//处理图片资源
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
loader: 'url-loader',
options: {
// 图片会大于8kb，会被base64处理 减少请求数量（减轻服务器压力） 图片体积会更大（文件请求数量慢）
limit: 8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'img',
esModule: false
},
type: 'javascript/auto'
},
// html中img图片的处理
{
test: /\.html$/,
loader: 'html-loader'
},
// 打包其他资源(排除js/css/html)
{
exclude: /\.(js|json|html|css|less|scss|png|gif|jpg|jpeg)/,
loader: 'file-loader',
options: {
outputPath: 'media', //指定这些文件打包后的目录
publicPath: './font',
name: '[name][hash:8].[ext]'
},
type: 'javascript/auto'
}
]
},
plugins: [
// html文件
new HtmlWebpackPlugin({
template: './src/pages/',
// html压缩
minify: {
collapseWhitespace: true,
removeComments: true
}
}),
// css文件使用
new MiniCssExtractPlugin({
filename: 'css/'
}),
// 压缩css
new OptimizeCssAssetsPlugin()
],
mode: 'production'
}