webpack4 打包卡住
将之前的项目webpack版本升级成v4,在打包的时候遇到了一个问题,打包100%后,程序未结束,一直卡在100%的地方。
贴一下webpack.config.js的配置文件:
const webpack = require('webpack')
const path = require('path')
const Uglify = require('uglifyjs-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const resolvePath = inputPath => path.resolve(__dirname, inputPath)
const VueLoader = require('vue-loader/lib/plugin')
const isProd = process.env.NODE_ENV === 'production'
let webpackConfig = {
mode: isProd ? 'production' : 'development',
stats: 'minimal',
entry: {
app: [resolvePath('./src/main.js')]
},
output: { // 出口文件
filename: '[name].[hash:8].js',
path: resolvePath('./dist'),
publicPath: '/'
},
resolve: {
// require时省略的扩展名,如:require('module') 不需要module.js
extensions: ['.js', '.vue', '.css'],
// 别名,可以直接使用别名来代表设定的路径以及其他
alias: {
'vue$': 'vue/dist/vue.esm.js',
'components': path.join(__dirname, './src/components'),
'business': path.join(__dirname, './src/views/business'),
'views': path.join(__dirname, './src/views'),
'utils': path.join(__dirname, './src/utils')
}
},
module: {
rules: [
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: file => /node_modules/.test(file) && !/\.vue\.js/.test(file)
},
{
test: /\.vue$/,
use: ['vue-loader']
},
{
test: /\.css$/,
use: [
isProd ? MiniCssExtractPlugin.loader : 'vue-style-loader',
'css-loader'
]
},
{
test: /\.less$/,
use: [
isProd ? MiniCssExtractPlugin.loader : 'vue-style-loader',
'css-loader',
'less-loader'
]
},
{
test: /\.scss/,
use: ['vue-style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
outputPath: 'images/', //在output基础上,修改输出图片文件的位置
publicPath: '../dist/images/', //修改背景图引入url的路径
limit: 8 * 1024, // 8kb大小以下的图片文件都用base64处理
name: '[hash:8].[ext]' // hash值为7位,ext自动补全文件扩展名
}
}
]
},
{
test: /\.(gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
use: [
{
loader: 'file-loader?limit=8192&name=images/[name].[ext]'
}
]
},
{
test: /\.html$/,
use: [
'html-withimg-loader'
]
},
{
test: /\.(html|tpl)$/,
use: [
'html-loader'
]
}
]
},
// devtool: 'cheap-module-eval-source-map',
devServer: {
historyApiFallback: true,
inline: true,
hot: false,
host: '0.0.0.0',
disableHostCheck: true
},
plugins: [
// 处理 .vue
new VueLoader(),
new webpack.LoaderOptionsPlugin({
options: {
babel: {
presets: ['es2015']
},
minimize: true
}
}),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: resolvePath('index.html')
})
]
}
if (!isProd) {
webpackConfig.plugins.push(
)
} else {
webpackConfig.plugins.push(
new Uglify(),
// new webpack.optimize.OccurrenceOrderPlugin()
)
}
module.exports = webpackConfig
package.json打包配置如下:
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --public --inline --progress --colors --port 7799",
"pub": "cross-env NODE_ENV=development webpack --config webpack.config.js --colors --watch --progress",
"prod": "cross-env NODE_ENV=production webpack --config webpack.config.js --colors --watch --progress"
},
当运行npm run pub的时候
如图所示,光标一直停留在这儿,不知道什么原因。
webpack版本:
"webpack": "^4.18.1",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.4"
node版本:v10.16.0
npm版本:6.9.0
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论