前言
软件系统定制开发你是否也是只会运用框软件系统定制开发架中集成好的呢？软件系统定制开发你明白每一项的意义么？你懂多少Webpack软件系统定制开发的个性化配置项呢？软件系统定制开发本篇文章为你讲解Webpack软件系统定制开发中的各种配置项参数及作用！
文章目录
了解Webpack相关
什么是webpack
Webpack软件系统定制开发是一个模块打包器(bundler)。
在Webpack看来, 软件系统定制开发前端的所有资源文件(js/json/css/img/less/…)软件系统定制开发都会作为模块处理
软件系统定制开发它将根据模块的依赖关软件系统定制开发系进行静态分析，软件系统定制开发生成对应的静态资源
软件系统定制开发五个核心概念
Entry：入口起点(entry point)指示 webpack 软件系统定制开发应该使用哪个模块，软件系统定制开发来作为构建其内部依赖图的开始。
Output：output 属性告诉 webpack 软件系统定制开发在哪里输出它所创建的 bundles，软件系统定制开发以及如何命名这些文件，默认值为 ./dist。
Loader：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只能解析 JavaScript）。
Plugins：插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
Mode：模式，有生产模式production和开发模式development
理解Loader
Webpack 本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载
Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
它本身是一个函数，接受源文件作为参数，返回转换的结果
loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。
理解Plugins
插件可以完成一些loader不能完成的功能。
插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
配置文件(默认)
webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象
开启项目
初始化项目：
生成package.json文件
{ "name": "webpack_test", "version": "1.0.0" } - 1
- 2
- 3
- 4
npm install webpack webpack-cli -g //全局安装,作为指令使用- 1
npm install webpack webpack-cli -D //本地安装,作为本地依赖使用- 1
编译打包应用
创建js文件
- src/js/app.js
- src/js/module1.js
- src/js/module2.js
- src/js/module3.js
创建json文件
src/json/data.json - 1
创建主页面:
src/index.html- 1
运行指令
- 开发配置指令：webpack src/js/app.js -o dist/js/app.js --mode=development
- 功能: webpack能够编译打包js和json文件，并且能将es6的模块化语法转换成浏览器能识别的语法
- 生产配置指令：
webpack src/js/app.js -o dist/js/app.js --mode=production - 功能: 在开发配置功能上加上一个压缩代码
结论：
- webpack能够编译打包js和json文件
- 能将es6的模块化语法转换成浏览器能识别的语法
- 能压缩代码
缺点：
- 不能编译打包css、img等文件
- 不能将js的es6基本语法转化为es5以下语法
改善： 使用webpack配置文件解决，自定义功能
使用webpack配置文件
目的：
在项目根目录定义配置文件，通过自定义配置文件，还原以上功能
文件名称：
webpack.config.js
文件内容：
const { resolve } = require('path'); //node内置核心模块，用来设置路径。 module.exports = { entry: './src/js/app.js', // 入口文件配置（简写） /*完整写法： entry:{ main:'./src/js/app.js' } */ output: { // 输出配置 filename: './js/built.js', // 输出文件名 path: resolve(__dirname, 'build') //输出文件路径配置 }, mode: 'development' //开发环境(二选一) mode: 'production' //生产环境(二选一) };- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
运行指令： webpack
打包less资源
概述：
less文件webpack不能解析，需要借助loader编译解析
创建less文件
- src/less/test1.less
- src/less/test2.less
- 入口app.js文件
- 引入less资源
- 安装loader
npm install css-loader style-loader less-loader less --save-dev
配置loader
{ test: /\.less$/, // 检查文件是否以.less结尾（检查是否是less文件） use: [ // 数组中loader执行是从下到上，从右到左顺序执行 'style-loader', // 创建style标签，添加上js中的css代码 'css-loader', // 将css以commonjs方式整合到js文件中 'less-loader' // 将less文件解析成css文件 ] },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
运行指令： webpack
js语法检查
概述：
对js基本语法错误/隐患，进行提前检查
安装loader
- npm install eslint-loader eslint --save-dev
- 备注1：在：eslint.org网站 -> userGuide -> Configuring ESLint 查看如何配置
- 备注2：在：eslint.org网站 -> userGuide -> Rules 查看所有规则
配置loader
module: { rules: [ { test: /\.js$/, //只检测js文件 exclude: /node_modules/, //排除node_modules文件夹 enforce: "pre", //提前加载使用 use: { //使用eslint-loader解析 loader: "eslint-loader" } } ] }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
加粗样式
"eslintConfig": { "parserOptions": { "ecmaVersion": 6, // 支持es6 "sourceType": "module" // 使用es6模块化 }, "env": { // 设置环境 "browser": true, // 支持浏览器环境： 能够使用window上的全局变量 "node": true // 支持服务器环境: 能够使用node上global的全局变量 }, "globals": { // 声明使用的全局变量, 这样即使没有定义也不会报错了 "$": "readonly" // $ 只读变量 }, "rules": { // eslint检查的规则 0 忽略 1 警告 2 错误 "no-console": 0, // 不检查console "eqeqeq": 2, // 用==而不用===就报错 "no-alert": 2 // 不能使用alert }, "extends": "eslint:recommended" // 使用eslint推荐的默认规则 https://cn.eslint.org/docs/rules/ },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
运行指令： webpack
js语法转换
概述：
将浏览器不能识别的新语法转换成原来识别的旧语法，做浏览器兼容性处理
安装loader
npm install babel-loader @babel/core @babel/preset-env --save-dev- 1
配置loader
module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ['@babel/preset-env'] } } } ] }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
运行指令： webpack
js兼容性处理
第一种方法：使用经典的polyfill
安装包
npm install @babel/polyfill- 1
使用
app.jsimport '@babel/polyfill'; // 包含ES6的高级语法的转换- 1
- 2
优点
解决babel只能转换部分低级语法的问题(如：let/const/解构赋值…)，引入polyfill可以转换高级语法(如:Promise…)
缺点
将所有高级语法都进行了转换，但实际上可能只使用一部分
解决
需要按需加载（使用了什么高级语法，就转换什么，而其他的不转换）
第二种方法：借助按需引入按需引入
安装包
npm install core-js- 1
配置loader
{ test: /\.js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', { useBuiltIns: 'usage', // 按需引入需要使用polyfill corejs: { version: 3 }, // 解决warn targets: { // 指定兼容性处理哪些浏览器 "chrome": "58", "ie": "9", } } ] ], cacheDirectory: true, // 开启babel缓存 } } },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
打包样式文件中的图片资源
概述：图片文件webpack不能解析，需要借助loader编译解析
添加2张图片:
- 小图, 小于8kb: src/images/vue.png
- 大图, 大于8kb: src/images/react.jpg
- 在less文件中通过背景图的方式引入图片
安装loader
npm install file-loader url-loader --save-dev - 1
补充
url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。
配置loader
{ test: /\.(png|jpg|gif)$/, use: { loader: 'url-loader', options: { limit: 8192, // 8kb --> 8kb以下的图片会base64处理 outputPath: 'images', // 决定文件本地输出路径 publicPath: '../build/images', // 决定图片的url路径 name: '[hash:8].[ext]' // 修改文件名称 [hash:8] hash值取8位 [ext] 文件扩展名 } } },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
运行指令： webpack
打包html文件
概述：
html文件webpack不能解析，需要借助插件编译解析
添加html文件
src/index.html
注意不要在html中引入任何css和js文件
安装插件Plugins
npm install html-webpack-plugin --save-dev - 1
在webpack.config.js中引入插件（插件都需要手动引入，而loader会自动加载）
const HtmlWebpackPlugin = require('html-webpack-plugin')- 1
配置插件Plugins
plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', // 以当前文件为模板创建新的HtML(1. 结构和原来一样 2. 会自动引入打包的资源) }), ]- 1
- 2
- 3
- 4
- 5
运行指令： webpack
打包html中图片资源
概述：
html中的图片url-loader没法处理，它只能处理js中引入的图片 / 样式中图片，不能处理html中img标签，需要引入其他html-loader处理。
添加图片
在src/index.html添加两个img标签
安装loader
npm install html-loader --save-dev - 1
配置loader
{ test: /\.(html)$/, use: { loader: 'html-loader' } }- 1
- 2
- 3
- 4
- 5
- 6
运行指令： webpack
打包其他资源
概述：
其他资源webpack不能解析，需要借助loader编译解析
添加字体文件
- src/media/iconfont.eot
- src/media/iconfont.svg
- src/media/iconfont.ttf
- src/media/iconfont.woff
- src/media/iconfont.woff2
修改样式
@font-face { font-family: 'iconfont'; src: url('../media/iconfont.eot'); src: url('../media/iconfont.eot?#iefix') format('embedded-opentype'), url('../media/iconfont.woff2') format('woff2'), url('../media/iconfont.woff') format('woff'), url('../media/iconfont.ttf') format('truetype'), url('../media/iconfont.svg#iconfont') format('svg'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
配置loader
{ test: /\.(eot|svg|woff|woff2|ttf|mp3|mp4|avi)$/, // 处理其他资源 loader: 'file-loader', options: { outputPath: 'media', name: '[hash:8].[ext]' } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
运行指令： webpack
自动编译打包运行
安装loader
npm install webpack-dev-server --save-dev- 1
详细配置见官网：指南 -> 开发环境 -> 使用webpack-dev-server
修改webpack配置对象（注意不是loader中）
devServer: { open: true, // 自动打开浏览器 compress: true, // 启动gzip压缩 port: 3000, // 端口号 }- 1
- 2
- 3
- 4
- 5
修改url-loader部分配置
- 因为构建工具以build为根目录，不用再找build了
publicPath: '../build/images/'-->publicPath: 'images/'
修改package.json中scripts指令
"start": "webpack-dev-server",- 1
运行指令： npm run start
注意webpack-dev-server指令才能启动devServer配置，然后配置到package.json中才行
热模替换功能
概述：
热模块替换（HMR）是webpack提供的最有用的功能之一。它允许在运行时更新所有类型的模块，而无需完全刷新（只更新变化的模块，不变的模块不更新）。
详细配置见官网：指南 -> 模块热替换
修改devServer配置
devServer: { contentBase: resolve(__dirname, 'build'), // 运行项目的目录 open: true, // 自动打开浏览器 compress: true, // 启动gzip压缩 port: 3000, // 端口号 hot: true // 开启热模替换功能 HMR }- 1
- 2
- 3
- 4
- 5
- 6
- 7
问题： html文件无法自动更新了，需要增加一个入口
entry: ['./src/js/app.js','./src/index.html']- 1
devtool
概述：
一种将压缩/编译文件中的代码映射回源文件中的原始位置的技术，让我们调试代码不在困难
详细配置见官网：配置 -> devtool
介绍
cheap 只保留行, 编译速度快
eval webpack生成的代码（每个模块彼此分开，并使用模块名称进行注释）, 编译速度快
inline 以base64方式将source-map嵌入到代码中，缺点造成编译后代码体积很大
推荐使用：
开发环境： cheap-module-eval-source-map
生产环境： cheap-module-source-map
以上就是webpack开发环境的配置，可以在内存中自动打包所有类型文件并有自动编译运行、热更新等功能。
准备生产环境
创建文件夹config
将webpack.config.js复制两份
- ./config/webpack.dev.js
- ./config/webpack.prod.js
- 修改webpack.prod.js配置，删除webpack-dev-server配置
// / 代表根路径(等价于这个：http://localhost:5000/)，以后项目上线所有路径都以当前网址为根路径出发 module.exports = { output: { path: resolve(__dirname, '../build'), // 文件输出目录 filename: './js/built.js', // 文件输出名称 publicPath: '/' // 所有输出资源在引入时的公共路径，若loader中也指定了publicPath，会以loader的为准。 }, module: { rules: [ { test: /\.(png|jpg|gif)$/, use: { loader: 'url-loader', options: { limit: 8192, outputPath: 'images', publicPath: '/images', // 重写publicPath，需要在路径前面加上 / name: '[hash:8].[ext]' } } }, ] }, mode: 'production', //修改为生产环境 devtool: 'cheap-module-source-map' // 修改为生产环境的错误提示 // 删除devServer }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
修改package.json的指令
“start”: “webpack-dev-server --config ./config/webpack.dev.js”
“dev”: “webpack-dev-server --config ./config/webpack.dev.js”
“build”: “webpack --config ./config/webpack.prod.js”
开发环境指令
npm startnpm run dev- 1
- 2
生产环境指令
npm run build- 1
注意: 生产环境代码需要部署到服务器上才能运行 （serve这个库能帮助我们快速搭建一个静态资源服务器）
npm i serve -g serve -s build -p 5000- 1
- 2
清除打包文件目录
概述：
每次打包生成了文件，都需要手动删除，引入插件帮助我们自动删除上一次的文件
安装插件
npm install clean-webpack-plugin --save-dev- 1
引入插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 注意要解构赋值！！！- 1
- 2
配置插件
new CleanWebpackPlugin() // 自动清除output.path目录下的文件- 1
运行指令： npm run build
提取css成单独文件
安装插件
npm install mini-css-extract-plugin --save-dev
引入插件
const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);
配置loader
{ test: /\.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', ] }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
配置插件
new MiniCssExtractPlugin({ filename: "css/[name].css", })- 1
- 2
- 3
运行指令
npm run buildserve -s build- 1
- 2
添加css兼容
安装loader
npm install postcss-loader postcss-flexbugs-fixes postcss-preset-env postcss-normalize autoprefixer --save-dev - 1
配置loader
{ test: /\.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', { loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), require('postcss-preset-env')({ autoprefixer: { flexbox: 'no-2009', }, stage: 3, }), require('postcss-normalize')(), ], sourceMap: true, }, }, 'less-loader', ] }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
添加配置文件: .browserslistrc
last 1 version > 1% IE 10 # sorry- 1
- 2
- 3
运行指令：
npm run buildserve -s build- 1
- 2
压缩css
安装插件
npm install optimize-css-assets-webpack-plugin --save-dev - 1
引入插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); - 1
配置插件
new OptimizeCssAssetsPlugin({ cssProcessorPluginOptions: { preset: ['default', { discardComments: { removeAll: true } }], }, cssProcessorOptions: { // 解决没有source map问题 map: { inline: false, annotation: true, } } })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
运行指令：
npm run buildserve -s build - 1
- 2
压缩html
修改插件配置
new HtmlWebpackPlugin({ template: './src/index.html', minify: { removeComments: true, collapseWhitespace: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, removeStyleLinkTypeAttributes: true, keepClosingSlash: true, minifyJS: true, minifyCSS: true, minifyURLs: true, } })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
运行指令：
npm run buildserve -s dist - 1
- 2
以上就是webpack生产环境的配置，可以生成打包后的文件。
本期推荐
最近几年Vue越来越火热，BAT等互联网大厂都在前端职位招聘中加入了精通Vue.js框架的要求，就连饿了么公司的技术团队也专门为Vue.js设计了UI框架体系。本书的实操案例都是笔者独立完成的实际项目，有着对标市场实际需求的参考价值，同时本书提供的框架模式可以让读者应用于其他项目，从而提高开发效率，减少开发弯路。
本书从Vue.js框架技术的基础概念出发，逐步深入Vue.js进阶实战，并在最后配合一个网站项目和一个后台系统开发实战案例，重点介绍了使用Vue.js+axios+ElementUI+wangEditor进行前端开发和使用组件进行Vue单页面网页复用，让读者不但可以系统地学习Vue.js前端开发框架的相关知识，而且还能对业务逻辑的分析思路、实际应用开发有更为深入的理解。
本书语言平实，用词诙谐，案例丰富，实用性强，特别适合刚入社会的职场新人、Vue.js框架的初级读者和进阶读者阅读，也适合希望从后台开发转型做前端的程序员等其他编程爱好者阅读。另外，本书也适合作为相关培训机构的教材使用。