项目目录如下图:
webpack.config.js如下:
var path = require('path');
/*由于webpack plugins是在webpack中,所以引用webpack*/
var webpack = require('webpack');
module.exports = {
mode: 'none',/*webpack中必加,否则报错*/
entry: {
admin: './admin/index.js',
consumer: './consumer/index.js'
},
plugins: [
/*插件*/
],
/*打包的配置output(分为三个部分)*/
output: {
path: path.join(__dirname, 'dist'),//打包的文件所放的文件夹
publicPath: "/dist/",//去哪找打包的文件
filename: '[name].bundle.js',//最后打包的文件名称,此项目是两个js文件,所以用[name],打包完之后是admin.bundle.js和consumer.bundle.js
},
module: {
// noParse: [/jquery/],//提升性能,大的第三方包能不打包的就不打包进去
rules: [
/*{
test: /\.png$/,
use:{
loader: 'file-loader',
}
},*/
{
test: /imgs/,
use:{
loader: 'file-loader',//文件路径
}
},{
test: /icons/,
use:{
loader: 'url-loader',//base64
}
},{
test: /\.css$/,
use: [{
loader: 'style-loader'
},{
loader: 'css-loader'
}]
},{
test: /\.scss$/,
use: [{
loader: 'style-loader'
},{
loader: 'css-loader'
},{
loader: 'sass-loader'
}]
},{
test: /\.js$/,
exclude: /node_modules/,
// include: /(admin|consumer)/,
use:{
loader: 'babel-loader',
}
}]
}
};
/*由于打包出的文件有很多注释 还有空行 所以打包出来的文件会很大 new webpack.optimize.UglifyJsPlugin()该方法已被移除*/
/*webpack plugins*/
/*https://webpack.js.org/concepts/plugins/*/
package.json如下:
{
"name": "shopping",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open --process --colors --hot --inline -d",
"build-dev": "webpack --mode development",
"build-pro": "webpack --mode production"
},
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^4.29.0",
"webpack-dev-server": "^3.1.14"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"css-loader": "^2.1.0",
"file-loader": "^3.0.1",
"node-argv": "0.0.7",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.1.1",
"url-loader": "^1.1.2",
"webpack-cli": "^3.2.1"
}
}
后续有时间再填详解啦......