Webpack4.x|Webpack4.x 构建多页面打包(2019-01-25)
基础请参考上篇入门: 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 }
}
]
})
}
]
}
};
【Webpack4.x|Webpack4.x 构建多页面打包(2019-01-25)】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
请自行配置,可用作多页面跳转
文章图片
配置项目录结构 三、打包后的目录结构
文章图片
打包后的目录结构 四、细节上有不明白的可以留言 ~
推荐阅读
- 放屁有这三个特征的,请注意啦!这说明你的身体毒素太多
- 爱就是希望你好好活着
- 昨夜小楼听风
- 知识
- 死结。
- 我从来不做坏事
- 烦恼和幸福
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- Linux下面如何查看tomcat已经使用多少线程
- 说得清,说不清