problem description
above webpack3, how to compress all packaged js files into one js file?
the environmental background of the problems and what methods you have tried
webpack.config.js
const path = require("path")
const HTMLPlugin = require("html-webpack-plugin")
const webpack = require("webpack")
const ExtractPlugin = require("extract-text-webpack-plugin")
const isDev = process.env.NODE_ENV === "development"
const srcRoot = path.resolve(__dirname, "src");
const config = {
target: "web",
entry: path.join(__dirname, "src/main.js"),
output: {
filename: "pk-skin.min.js",
path: path.join(__dirname, "dev")
},
resolve: {
alias: {
components: path.resolve(srcRoot, "components"),
"@": path.resolve(srcRoot),
},
extensions: [".js", ".vue"]
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.jsx$/,
loader: "babel-loader"
},
{
test: /\.less$/,
loader: "less-loader"
},
{
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 1024,
// name: "resources/[path][name].[hash:8].[ext]"
}
}
]
}
]
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: isDev ? ""development"" : ""production""
}
}),
new HTMLPlugin()
]
}
if (isDev) {
config.module.rules.push({
test: /\.styl/,
use: [
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
sourceMap: true,
}
},
"stylus-loader"
]
})
config.devtool = "-sharpcheap-module-eval-source-map"
config.devServer = {
port: 8000,
host: "0.0.0.0",
overlay: {
errors: true,
},
hot: true
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
} else {
config.entry = {
app: path.join(__dirname, "src/main.js"),
vendor: ["vue"]
}
config.output.filename = "pk-skin.min.js"
}
module.exports = config
related codes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="pk-skin.min.js"></script><script type="text/javascript" src="undefined"></script></body>
</html> 