webpack多页应用框架从零搭建 webpack多页应用框架从零搭建

我的github地址：https://github.com/SmaVivian/webpack4-multi-page.git
v1.0.0版本 https://github.com/SmaVivian/webpack4-multi-page.git
引入css文件：除相对路径外也可使用alias

// webpack.config.base.js resolve: { extensions: [".js", ".css", ".json"],// 自动补全的扩展名 alias: { "@": resolve('../src'), } }

// index.js文件： import '@/style/index.css'

css-loader和style-loader是干什么用的呢？

module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }

引用《入门webpack》中的原文：css-loader使你能够使用类似@import和url（...）的方法实现require的功能，style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的js文件中。
启动时指定页面

devServer: { contentBase: path.resolve(__dirname, '../src'), //告诉服务器从哪里提供内容, 最好设置成绝对路径 index: 'page/index.html',// 启动的时候，就在的页面 }

html跳转路径问题：使用绝对路径

// index.html index1

css3样式前缀：postcss-loader+autoprefixer

安装
npm install --save-dev postcss-loader autoprefixer
新增postcss.config.js文件

module.exports = { parser: 'postcss', plugins: { 'autoprefixer': {} } }

package.json中添加

"browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ]

webpack.conf.dev.js

{ test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { sourceMap: true } }, { loader: 'postcss-loader', options: { sourceMap: true } } ] },

图片引入三种方式

css：url-loader
css文件中图片路径问题：修改publicPath

// webpack.config.base.js { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use: [{ loader: 'url-loader', options: { limit: 8192, // 8k name: 'images/[name].[hash:7].[ext]', // 回退使用file-loader时的名称 publicPath: '/',// 解决开发环境css文件引入图片路径问题，根据文件结构而修改 // outputPath: 'images/', // 生产环境 fallback: 'file-loader',// 当超过8192byte时，会回退使用file-loader } }] },

html：处理html中引入的图片路径问题，打包html中的图片：安装html-loader
npm install --save-dev html-loader

// webpack.config.prod.js module: { rules: [ { test: /\.html$/, use: { loader: 'html-loader' } }, ] },

// js引入b文件夹下的图片 es6语法测试 let img = document.querySelector('#myImg'); img.src = https://www.it610.com/article/require('./../../images/b/b.png');

引入第三方库
https://segmentfault.com/a/1190000016180138

npm i jquery -S
webpack.config.base.js

const webpack=require('webpack'); //引入webpack模块，ProvidePlugin是webpack身上的一个插件 module.exports = { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', // jQuery: 'jquery' }) ] }

提取第三方库,按需提取js: optimization 优化

// webpack.config.prod.js module.exports = { optimization: { splitChunks: { // chunks: 'all', // minSize: 30000,//模块最小体积 // minChunks: 1,//模块最小被引用的次数 // maxAsyncRequests: 5,//按需加载的最大并行请求数 // maxInitialRequests: 3,//一个入口最大并行请求数 // automaticNameDelimiter: '~',//文件连接符 // name: true, cacheGroups: { jquery: {// 抽离第三方插件 test: /jquery/,// 指定是node_modules下的第三方包 chunks: 'initial', name: 'jquery',// 打包后的文件名，任意命名 // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包 priority: 10 }, } } } }

打包压缩css文件
注意：webpack默认会压缩js, 压缩css文件需要覆盖默认的minimizer，所以js也需要手动压缩
npm i uglifyjs-webpack-plugin optimize-css-assets-webpack-plugin -D

// webpack.config.prod.js optimization: { minimizer: [ // 用于配置 minimizers 和选项 new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: true // set to true if you want JS source maps }), new OptimizeCSSAssetsPlugin({}) ] },

babel-loader 翻译 js 文件及、es6语法、处理兼容等

npm install -D babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime

// webpack.config.base.js rules: [ { // test: /\.js$/, test: /\.m?js$/, include: [config.srcPath],// 在源文件目录查询 exclude: [config.assetsSubDirectory, config.node_modulesPath], // 忽略第三方的任何代码 use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: ['@babel/plugin-transform-runtime'] } } }, ]

https://www.qdskill.com/tools/webpackjs/4819.html
阮一峰老师的webpack教程地址：https://github.com/ruanyf/webpack-demos
https://dailc.github.io/2017/03/13/webpackfreshmanualAndBug.html
生成文件结构目录
Windows平台:打开cmd,输入where git就会显示git的安装路径了.

文章图片
image.png
到http://gnuwin32.sourceforge.net/packages/tree.htm下载Binaries文件

文章图片
image.png
解压后，把bin目录下的tree.exe文件复制到git安装目录下的usr/bin目录即可，如例复制到 C:\Program Files\Git\usr\bin

文章图片
image.png 这样在git bash上就可以直接使用tree命令了
tree -L 2 -I "node_modules|dist" -o tree.text

文章图片
image.png 【webpack多页应用框架从零搭建】参考：https://www.imqianduan.com/tool/164.html
我的github地址：https://github.com/SmaVivian/webpack4-multi-page.git
v1.0.0版本 https://github.com/SmaVivian/webpack4-multi-page.git
github参考：
https://github.com/LQCreator/multi-page-webpack
https://github.com/kailong321200875/webpack-multiPage-cli
https://github.com/Blubiubiu/webpack4_mpa_demo
https://github.com/pomelott/webpack4.x_Demo/tree/master/src
https://github.com/yanxiaojun617/webpack4-bootstrap4-demo/tree/master/src