基础请参考上篇入门： Webpack4.x 入门上手实战（2018.08）
一、开始
根据入门篇构建一个基础的项目，在此基础上进行升级，不再一一叙述，直接上代码：
1、拆分配置文件：
可以根据自己的需求随意拆分，这里简单举例
在根目录新建三个文件：webpack.config.js、webpack.entry.js、webpack.plugins.js
webpack.config.js是必备的配置文件
const path = require('path')
const entry = require('./webpack.entry.js')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const pluginsConfig = require("./webpack.plugins.js")
const pxtorem = require('postcss-pxtorem')
const autoprefixer = require('autoprefixer')
const optimizeCss = require('optimize-css-assets-webpack-plugin')
module.exports = {
// JS 执行入口文件
entry: entry,
output: {
// 把所有依赖的模块合并输出到一个 bundle.js 文件
filename: './js/[name].bundle.js',
// 输出文件都放到 superStyle 目录下
path: path.resolve(__dirname, './superStyle'),
},
plugins: pluginsConfig,
optimization: {
// minimize: true,
minimizer: [new optimizeCss({})],
},
devServer: {
contentBase: './superStyle',
port: 7777,
host: '0.0.0.0',
openPage: 'page'
},
module: {
rules: [
{
test: /\.(png|jpg|gif|eot|svg|ttf|woff)$/,
use:[{
loader:'url-loader',
options:{
limit:2000, // 表示小于2kb的图片转为base64,大于5kb的是路径
// outputPath:'../images', //定义输出的图片文件夹
name: 'images/[name].[hash:7].[ext]',
publicPath:"../"
}
}]
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(css|less)$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
// publicPath:'../',
use: [
// require.resolve('style-loader'),
{
loader: 'css-loader',
// options: {
// importLoaders: n
// }
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
pxtorem({
rootValue: 100,
propWhiteList: []
}),
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'iOS >= 7',
'Android >= 4',
'>1%',
'Firefox ESR',
'not ie < 9'
],
flexbox: 'no-2009'
})
]
}
},
{
loader: 'less-loader',
options: { javascriptEnabled: true }
}
]
})
}
]
}
};
webpack.entry.js入口配置
module.exports = {
index: './src/js/index.js',
login: './src/js/login.js'
}
webpack.plugins.js插件设置
const webpack = require("webpack")
const entry = require('./webpack.entry.js')
// 分离css > extract-text-webpack-plugin@next
const ExtractTextPlugin = require("extract-text-webpack-plugin")
// 清除目录
const CleanWebpackPlugin = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 压缩
const optimizeCss = require('optimize-css-assets-webpack-plugin')
let html = []
Object.keys(entry).forEach(k => {
let h = new HtmlWebpackPlugin({
title: k,
filename: `./page/${k}.html`,
template: `./src/page/${k}.html`,
inject: true,
chunks: [k]
})
html.push(h)
})
module.exports = [
new CleanWebpackPlugin(['superStyle']),
new ExtractTextPlugin("./style/[name].css"),
new optimizeCss({
assetNameRegExp: /\.style\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
}),
new HtmlWebpackPlugin({
title: "",
filename: `./index.html`,
template: `./index.html`,
inject: true,
chunks: ['main']
})
].concat(html)
package.json
{
"name": "dive-into-webpack",
"version": "1.0.0",
"scripts": {
"dev": "webpack-dev-server --open",
"build": "webpack"
},
"dependencies": {},
"devDependencies": {
"autoprefixer": "^9.4.5",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"clean-webpack-plugin": "^1.0.0",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-flexbugs-fixes": "^4.1.0",
"postcss-loader": "^3.0.0",
"postcss-pxtorem": "^4.0.1",
"style-loader": "^0.18.2",
"url-loader": "^1.1.2",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.14"
}
}
二、目录结构
src文件夹里存放的就是多页面的，根目录的index.html和main.js请自行配置，可用作多页面跳转
配置项目录结构
三、打包后的目录结构
打包后的目录结构
