详解webpack4多入口、多页面项目构建案例


Posted in Javascript onMay 25, 2018

趁工作之余从零构建了一个webpack4.x多页面应用程序。过程中也遇到一些坑,就记录下来了。

webpack核心概念

  1. Entry:入口,Webpack 执行构建的第一步将从 Entry 开始。
  2. Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
  3. Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。
  4. Loader:模块转换器,用于把模块原内容按照需求转换成新内容。
  5. Plugin:扩展插件,在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
  6. Output:输出结果,在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。
  7. 项目的运行主要围绕的就是这几大块

首先看一下构建后目录

├── build
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ ├── webpack.prod.conf.js
│ ├── webpack.rules.conf.js
├── src
│ ├── css
│ ├── js
│ ├── images
│ ├── assets
│ ├── pages
│ │ ├── index
│ │ │ ├── index.html
│ │ │ ├── index.js
│ │ │ └── index.scss
│ │ ├── login
│ │ │ ├── index.html
│ │ │ ├── index.js
│ │ │ └── index.scss

1.多页面的入口文件

修改 webpack.base.conf.js代码

entry: {
  // 多入口文件
  index: ['./src/pages/index/index.js',],
  login: './src/pages/login/index.js',
 },

2.配置开发服务器

npm install webpack-dev-server --save-dev
//修改 webpack.dev.conf.js代码

devServer: {
 contentBase: path.join(__dirname, "../dist"),
 publicPath:'/',
 host: "127.0.0.1",
 port: "8089",
 overlay: true, // 浏览器页面上显示错误
 // open: true, // 开启自动打开浏览器
 // stats: "errors-only", //stats: "errors-only"表示只打印错误:
 hot: true // 开启热更新
},
//修改package.json
scripts: {
 "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.conf.js",
 "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js",
 "server": "live-server ./ --port=8888"
},

3.配置loader

{
 test: /\.(css|scss|sass)$/,
 // 不分离的写法
 // use: ["style-loader", "css-loader",sass-loader"]
 // 使用postcss不分离的写法
 // use: ["style-loader", "css-loader", sass-loader","postcss-loader"]
 // 此处为分离css的写法
 /*use: extractTextPlugin.extract({
  fallback: "style-loader",
  use: ["css-loader", "sass-loader"],
  // css中的基础路径
  publicPath: "../"
 })*/
 // 此处为使用postcss分离css的写法
 use: extractTextPlugin.extract({
  fallback: "style-loader",
  use: ["css-loader", "sass-loader", "postcss-loader"],
  // css中的基础路径
  publicPath: "../"

 })
},
{
 test: /\.js$/,
 use: ["babel-loader"],
 // 不检查node_modules下的js文件
 exclude: "/node_modules/"
}, {
 test: /\.(png|jpg|gif)$/,
 use: [{
  // 需要下载file-loader和url-loader
  loader: "url-loader",
  options: {
   limit: 5 * 1024,//小于这个时将会已base64位图片打包处理
   // 图片文件输出的文件夹
   outputPath: "images"
  }
 }]
}

4.从js中分离css

npm install extract-text-webpack-plugin --save-dev 
//这个插件在webpack4.x 运行时会有点问题,后面会提到
//修改 webpack.base.conf.js代码
// 分离css插件参数为提取出去的路径
new extractTextPlugin({
 filename: 'css/[name].[hash:8].min.css',
}),
5.处理css3属性前缀,消除冗余的css代码并压缩css

//属性自动加前缀
npm install postcss-loader --save-dev 
//在根目录新建postcss.config.js
module.exports = {
 plugins: [
  require('autoprefixer')//自动添加css前缀
 ]
};
//loader里加入postcss
{
 test: /\.(css|scss|sass)$/,
 // 此处为使用postcss分离css的写法
 use: extractTextPlugin.extract({
  fallback: "style-loader",
  use: ["css-loader", "sass-loader", "postcss-loader"],
  // css中的基础路径
  publicPath: "../"

 })
}
//修改package.json 加入css要兼容浏览器版本的代码
"browserslist": [
 "defaults",
 "not ie < 11",
 "last 2 versions",
 "> 1%",
 "iOS 7",
 "last 3 iOS versions"
]
//消除冗余css代码 使用glob模块去匹配文件所以还要安装glob模块
npm install purifycss-webpack --save-dev 
new purifyCssWebpack({
 paths: glob.sync(path.join(__dirname, "../src/pages/*/*.html"))
}),
//压缩css
npm install optimize-css-assets-webpack-plugin --save-dev 
//压缩css
//修改 webpack.prod.conf.js代码
new OptimizeCSSPlugin({
 cssProcessorOptions: {
  safe: true
 }
}),

5.清空打包目录

npm install clean-webpack-plugin --save-dev 
//修改 webpack.prod.conf.js代码
//删除dist目录
new cleanWebpackPlugin(['dist'], {
 root: path.resolve(__dirname, '../'), //根目录
 // verbose Write logs to console.
 verbose: true, //开启在控制台输出信息
 // dry Use boolean "true" to test/emulate delete. (will not remove files).
 // Default: false - remove files
 dry: false,
}),

6. 压缩js

npm install uglifyjs-webpack-plugin --save-dev 
//修改 webpack.prod.conf.js代码
//上线压缩 去除console等信息webpack4.x之后去除了webpack.optimize.UglifyJsPlugin
//https://github.com/mishoo/UglifyJS2/tree/harmony#compress-options
new UglifyJSPlugin({
 uglifyOptions: {
  compress: {
   warnings: false,
   drop_debugger: false,
   drop_console: true
  }
 }
}),

7.提取js公共模块

// webpack4里面移除了commonChunksPulgin插件,放在了config.optimization里面,提取js, vendor名字可改
optimization: {
 splitChunks: {
  cacheGroups: {
   vendor: {
    // test: /\.js$/,
    test: /[\\/]node_modules[\\/]/,
    chunks: "initial", //表示显示块的范围,有三个可选值:initial(初始块)、async(按需加载块)、all(全部块),默认为all;
    name: "vendor", //拆分出来块的名字(Chunk Names),默认由块名和hash值自动生成;
    enforce: true,
   }
  }
 }
},
//项目里配置了自动提取node_modules里用到的模块如jquery,也可以在原模板里面通过第三方cdn引入,又是另一种配置了。

在 webpack.base.conf.js利配置externals后webpack就不会去打包配置模块

externals: {
 'jquery': 'window.jQuery'
},
//externals就是webpack可以不处理应用的某些依赖库,使用externals配置后,依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。

8.复制静态资源

npm install copy-webpack-plugin --save-dev 
//静态资源输出,将src目录下的assets文件夹复制到dist目录下
new copyWebpackPlugin([{
 from: path.resolve(__dirname, "../src/assets"),
 to: './assets',
 ignore: ['.*']
}]),

9.产出html

npm install html-webpack-plugin --save-dev 
//修改webpack.base.conf.js代码
// 获取html-webpack-plugin参数的方法
var getHtmlConfig = function (name, chunks) {
 return {
  template: `./src/pages/${name}/index.html`,
  filename: `${name}.html`,
  // favicon: './favicon.ico',
  // title: title,
  inject: true,
  hash: true, //开启hash ?[hash]
  chunks: chunks,//页面要引入的包
  minify: process.env.NODE_ENV === "development" ? false : {
   removeComments: true, //移除HTML中的注释
   collapseWhitespace: true, //折叠空白区域 也就是压缩代码
   removeAttributeQuotes: true, //去除属性引用
  },
 };
};
//配置页面
const htmlArray = [{
  _html: 'index',
  title: '首页',
  chunks: ['vendor', 'index']//页面用到的vendor模块
 },
 {
  _html: 'login',
  title: '登录',
  chunks: ['login']
 },
];
//自动生成html模板
htmlArray.forEach((element) => {
 module.exports.plugins.push(new htmlWebpackPlugin(getHtmlConfig(element._html, element.chunks)));
})

10.性能优化 高大上的可视化分析模块

npm install webpack-bundle-analyzer --save-dev 
//修改 webpack.prod.conf.js代码
new BundleAnalyzerPlugin()
//npm run build 后会打开一个页面

详解webpack4多入口、多页面项目构建案例

cmd-markdown-logo

通过这个页面可以看到哪些页面是由哪些模块组成的,通过这个可视化页面可以更加方便去定位哪个包臃肿了,然后去优化。

报错 & 解决办法

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

后来发现webpack4不支持extract-text-webpack-plugin 必须下载next版本安装这个插件

npm install extract-text-webpack-plugin@next

https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/701

项目源码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript动态调整iframe高度的方法
Mar 06 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 #Javascript
vue axios整合使用全攻略
May 24 #Javascript
vue路由拦截及页面跳转的设置方法
May 24 #Javascript
使用Vue自定义指令实现Select组件
May 24 #Javascript
详解Vue单元测试case写法
May 24 #Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 #Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 #Javascript
You might like
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
python实现中文输出的两种方法
2015/05/09 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
python基于openpyxl生成excel文件
2020/12/23 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
后勤自我鉴定
2013/10/13 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
相亲大会策划方案
2014/06/05 职场文书
写字楼租赁意向书
2014/07/30 职场文书
商务考察邀请函模板
2015/02/02 职场文书
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js