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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了详解webpack4多入口、多页面项目构建案例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7097字，纯文字阅读大概需要11分钟。

内容图文

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

webpack核心概念

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

首先看一下构建后目录

├── 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

项目源码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的详解webpack4多入口、多页面项目构建案例全部内容，希望文章能够帮你解决详解webpack4多入口、多页面项目构建案例所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/337126.html

来源：【匿名】

【上一篇】webpack4的迁移的使用方法【下一篇】关于extract-text-webpack-plugin的使用及安装

更多 ►

【详解webpack4多入口、多页面项目构建案例】教程文章相关的互联网学习教程文章

webpack4.x配置详解，多页面，多入口，多出口，新特性新坑！！【代码】【图】

又到五一了，仍然还是单身。趁着单身还有时间，还是多多提升自己。花了差不多一天多的时间，重新撸了一遍webpack4.x的常用配置。github详细代码地址，喜欢请给星。 https://github.com/pomelott/webpack4.x_Demo 基本上常用的配置都熟悉了一遍，总体上来讲，为了对parcel进行反击，webpack从4.x开始，正在朝着尽可能的简化配置文件的方向发展。一、首先来看下，webpack4的新特性。1.webpack不在单独使用，4.x版本将很多命令移动到了...

【Web】阿里icon图标webpack插件（webpack-qc-iconfont-plugin）详解【代码】

webpack-qc-iconfont-pluginwebpack-qc-iconfont-plugin是一个webpack插件，可以轻松地帮你将阿里icon的图标项目下载至本地开发初衷之前已经发布过gulp的版本了，但是在webpack流行的时代，我还是觉得webpack插件版还是很有必有的，于是在我加班加点的研究下，我终于实现了webpack插件版为啥子要加班加点呢，因为我很懒，到目前为止都没有完整的看过官方的文档，所以基础很差，因此连更半夜的才把这个插件完成了，请原谅我的懒，真...

webpack独立打包和缓存处理详解【图】

前言先前写了一篇webpack入门的文章《webpack入门必知必会》，简单介绍了webpack拆分、打包、压缩的使用方法。本文将在上篇文章的基础上进一步讲解在使用webpack构建的项目中存在的优化方案与解决方法。上篇文章中写了一份webpack最基本的配置文件来打包压缩我们的代码：var path = require(path);module.exports = {entry: ./app/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist)} }在入口文件index...

详解浏览器缓存和webpack缓存配置【图】

浏览器缓存浏览器缓存分为两种类型：强缓存：也称为本地缓存，不向服务器发送请求，直接使用客户端本地缓存数据协商缓存：也称304缓存，向服务器发送请求，由服务器判断请求文件是否发生改变。如果未发生改变，则返回304状态码，通知客户端直接使用本地缓存；如果发生改变，则直接返回请求文件。浏览器缓存机制的过程如下：强缓存(本地缓存) 强缓存是最彻底的缓存，无需向服务器发送请求，通常用于css、js、图片等静态资源。浏览器...

详解webpack中四个基础概念

前面的话　　webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。当webpack处理应用程序时，它会递归地构建一个依赖关系图表(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的bundle(通常只有一个)，由浏览器加载。它是高度可配置的，在开始前需要先理解四个核心概念：入口(entry)、输出(output)、加载器(loader)、插...

Webpack的BundleSplit和CodeSplit有什么区别？（详解）【图】

本篇文章给大家带来的内容是关于Webpack的Bundle Split和Code Split有什么区别？（详解）有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。话说之前也是对 chunk 这个概念有些模糊，并且很多时候网上的文章大部分在将代码分离动态加载之类的。写这篇文章的目的也是想让其他那些跟我一样曾经对这个概念不是很清楚的童鞋有个清晰的认识。废话不多说，撸起袖子直接干！Lets pe in！Webpack 文件分离包括两个部分，一个...

webpack2+React使用详解

这次给大家带来webpack2+React使用详解，webpack2+React使用的注意事项有哪些，下面就是实战案例，一起来看一下。1.涉及到的插件需要npm install安装；2.html-webpack-plugin创建服务于 webpack bundle 的 HTML 文件；3.clean-webpack-plugin清除dist目录重复的文件；4.extract-text-webpack-plugin分离css文件。var path = require(path); var webpack = require(webpack); var HtmlWebpackPlugin = require(html-webpack-plugin)...

webpack多入口文件页面打包配置详解【图】

大多数情况下，我们使用 webpack来打包单页应用程序，这个时候只需要配置一个入口，一个模板文件，但也不尽是如此，有时候也会碰到多页面的项目，而且以我的经验来看，这种情况出现的频率还不低，例如项目比较大，无法进行全局的把握，或者项目需要多次的更新迭代等，都适合做成多页面程序，这就涉及到了 webpack的多页面文件的打包配置问题。手动配置单页应用程序和多页应用程序的 webpack配置文件其实绝大部分都还是相同的，只不...

webpack.config.js的配置详解

本文主要和大家分享webpack.config.js的配置详解，希望能帮助到大家，// webpack在执行时，除在命令行传入参数，还可以通过指定的配置文件来执行。默认会搜索当前目录下webpack.config.js。 // 这个文件是一个node.js模块，返回一个json格式的配置对象，或者通过--config选项来指定配置文件。 var webpack = require(webpack); module.exports = {entry:./entry.js, //入口文件// entry可以是个字符串或数组或者是对象。 // 当ent...

对于webpack4.0配置的详解【图】

这篇文章主要介绍了关于对webpack4.0配置的详解，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下前言机会总是留给有准备的人，要想在这兵荒马乱的求职季里出类拔萃，拿下你心中期待已久的offer。那么你更因该知道很多别人不知道的东西，你的羽翼才能丰满，才能翱翔于天际。鹰击长空，靠的不是天生，而是年少时断崖之险。笨鸟先飞，靠的不是智慧，而是孜孜不倦的努力。webpack详解webpack是一个打包工具，他的宗旨是...

webpack+dev+server使用详解

这次给大家带来webpack+dev+server使用详解，webpack+dev+server使用详解的注意事项有哪些，下面就是实战案例，一起来看一下。webpack-dev-serverwebpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时.我们来看一下下面的配置文件(webpack.config.js)var path = require("path"); module.exports = {entry:{app:["./...

webpack+loader实战案例详解

这次给大家带来webpack+loader实战案例详解，webpack+loader实战的注意事项有哪些，下面就是实战案例，一起来看一下。loader概念loader是用来加载处理各种形式的资源,本质上是一个函数, 接受文件作为参数,返回转化后的结构。loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不...

在webpack中使用devtool详解【图】

这篇文章主要介绍了webpack之devtool详解,现在分享给大家，也给大家做个参考。关于Devtool该选项控制是否以及如何生成源映射。官网上给出的可选值有：其中一些值适合开发，一些用于生产。对于开发，您通常需要快速的Source Maps，以bundle的大小为代价，但是对于生产，您需要独立的Source Maps，这是精确的，并且支持最小化。选择一种源映射样式，以增强调试过程。这些值可以显著地影响构建和重建速度。而不是使用devtool选项还可以...

vue-cli与webpack处理静态资源的方法及webpack打包使用步奏详解

这次给大家带来vue-cli与webpack处理静态资源的方法及webpack打包使用步奏详解，vue-cli与webpack处理静态资源的方法及webpack打包使用步的注意事项有哪些，下面就是实战案例，一起来看一下。通过Vue-cli进行webpack打包的坑Vue-cli为Vue项目搭建的脚手架的确很方便，但打包时容易出现空白页，或者对应的静态资源加载不了。我是通过将项目/config下的index.js的assetsPublicPath变成./，变成相对路径，进行解决。cd vue demo npm...

Webpack之babel-loader文件预处理器详解

这篇文章主要介绍了Webpack 之 babel-loader文件预处理器详解，现在分享给大家，也给大家做个参考。loader官方解释是文件预处理器，通俗点说就是webpack在处理静态文件的时候，需要使用 loader 来加载各种文件，比如： html文件需要使用html-loader ,css 需要使用css-loader 、 style-loader 等等。今天我们来认识的是 babel-loader，用来处理ES6语法，将其编译为浏览器可以执行的js语法。安装我们需要用到 babel-loader babel-cor...

项目 - 相关标签

项目代码项目管理工具项目开发项目开发流程项目类型

WEBPACK - 最热教程

浅谈webpack打包之后的文件过大的解决方...使用webpack插件html-webpack-plugin实...WebPack配置vue多页面步骤详解【Web】阿里icon图标webpack插件（webp...使用webpack如何实现文件打包在vue-cliwebpack中如何引入jquery（详...使用html-webpack-plugin'入再内存中生...JavaScript反爬笔记（3）_JS进阶（摘要...vue-cli · Failed to download repo vu...vue解决使用webpack打包后keep-alive不...

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

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【详解webpack4多入口、多页面项目构建案例】教程文章相关的互联网学习教程文章

项目 - 相关标签

WEBPACK - 最新教程

WEBPACK - 最热教程