安装webpack及使用

前言
你是否也是只会运用框架中集成好的Webpack配置呢？你明白每一项的意义么？你懂多少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"}

安装webpack

npm install webpack webpack-cli -g  //全局安装,作为指令使用

npm install webpack webpack-cli -D//本地安装,作为本地依赖使用

编译打包应用

创建js文件

• src/js/app.js
• src/js/module1.js
• src/js/module2.js
• src/js/module3.js

创建json文件

 src/json/data.json  

创建主页面:

  src/index.html

运行指令

• 开发配置指令：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'//生产环境(二选一)};

运行指令： webpack

打包less资源

概述：
less文件webpack不能解析，需要借助loader编译解析

创建less文件

• src/less/test1.less
• src/less/test2.less
• 入口app.js文件 - 引入less资源
• 安装loadernpm 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文件]},

运行指令： 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"}}]}

加粗样式

"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/},

运行指令： webpack

js语法转换

概述：
将浏览器不能识别的新语法转换成原来识别的旧语法，做浏览器兼容性处理

安装loader

npm install babel-loader @babel/core @babel/preset-env --save-dev

配置loader

module:{rules:[{test:/\.js$/,exclude:/node_modules/,use:{loader:"babel-loader",options:{presets:['@babel/preset-env']}}}]}

运行指令： webpack

js兼容性处理

第一种方法：使用经典的polyfill

安装包

npm install @babel/polyfill

使用

app.js
import'@babel/polyfill';// 包含ES6的高级语法的转换

优点
解决babel只能转换部分低级语法的问题(如：let/const/解构赋值…)，引入polyfill可以转换高级语法(如:Promise…)

缺点
将所有高级语法都进行了转换，但实际上可能只使用一部分

解决
需要按需加载（使用了什么高级语法，就转换什么，而其他的不转换）

第二种方法：借助按需引入core-js按需引入

安装包

npm install core-js

配置loader

{test:/\.js$/,exclude:/(node_modules)/,use:{loader:'babel-loader',options:{presets:[['@babel/preset-env',{useBuiltIns:'usage',// 按需引入需要使用polyfillcorejs:{version:3},// 解决warntargets:{// 指定兼容性处理哪些浏览器"chrome":"58","ie":"9",}}]],cacheDirectory:true,// 开启babel缓存}}},

打包样式文件中的图片资源

概述：图片文件webpack不能解析，需要借助loader编译解析

添加2张图片:

• 小图, 小于8kb: src/images/vue.png
• 大图, 大于8kb: src/images/react.jpg
• 在less文件中通过背景图的方式引入图片

安装loader

npm install file-loader url-loader --save-dev 

补充
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] 文件扩展名}}},

运行指令： webpack

打包html文件

概述：
html文件webpack不能解析，需要借助插件编译解析

添加html文件
src/index.html
注意不要在html中引入任何css和js文件

安装插件Plugins

npm install html-webpack-plugin --save-dev 

在webpack.config.js中引入插件（插件都需要手动引入，而loader会自动加载）

const HtmlWebpackPlugin =require('html-webpack-plugin')

配置插件Plugins

plugins:[newHtmlWebpackPlugin({template:'./src/index.html',// 以当前文件为模板创建新的HtML(1. 结构和原来一样 2. 会自动引入打包的资源)}),]

运行指令： webpack

打包html中图片资源

概述：
html中的图片url-loader没法处理，它只能处理js中引入的图片 / 样式中图片，不能处理html中img标签，需要引入其他html-loader处理。

添加图片
在src/index.html添加两个img标签

安装loader

npm install html-loader --save-dev 

配置loader

{test:/\.(html)$/,use:{loader:'html-loader'}}

运行指令： 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;}

配置loader

{test:/\.(eot|svg|woff|woff2|ttf|mp3|mp4|avi)$/,// 处理其他资源loader:'file-loader',options:{outputPath:'media',name:'[hash:8].[ext]'}}

运行指令： webpack

自动编译打包运行

安装loader

npm install webpack-dev-server --save-dev

详细配置见官网：指南 -> 开发环境 -> 使用webpack-dev-server
修改webpack配置对象（注意不是loader中）

devServer:{open:true,// 自动打开浏览器compress:true,// 启动gzip压缩port:3000,// 端口号}

修改url-loader部分配置

• 因为构建工具以build为根目录，不用再找build了
• publicPath: '../build/images/' --> publicPath: 'images/'

修改package.json中scripts指令

"start":"webpack-dev-server",

运行指令： 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}

问题： html文件无法自动更新了，需要增加一个入口

entry:['./src/js/app.js','./src/index.html']

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}

修改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 start
npm run dev

生产环境指令

npm run build

注意: 生产环境代码需要部署到服务器上才能运行 （serve这个库能帮助我们快速搭建一个静态资源服务器）

npm i serve -g  
serve -s build -p 5000

清除打包文件目录

概述：
每次打包生成了文件，都需要手动删除，引入插件帮助我们自动删除上一次的文件
安装插件

npm install clean-webpack-plugin --save-dev

引入插件

const{ CleanWebpackPlugin }=require('clean-webpack-plugin');// 注意要解构赋值！！！

配置插件

newCleanWebpackPlugin()// 自动清除output.path目录下的文件

运行指令： 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',]}

配置插件

newMiniCssExtractPlugin({filename:"css/[name].css",})

运行指令

npm run build
serve -s build

添加css兼容

安装loader

npm install postcss-loader postcss-flexbugs-fixes postcss-preset-env  postcss-normalize autoprefixer --save-dev 

配置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',]}

添加配置文件: .browserslistrc

    last 1 version
    >1%IE10 # sorry

运行指令：

npm run build
serve -s build

压缩css

安装插件

npm install optimize-css-assets-webpack-plugin --save-dev 

引入插件

const OptimizeCssAssetsPlugin =require('optimize-css-assets-webpack-plugin');

配置插件

newOptimizeCssAssetsPlugin({cssProcessorPluginOptions:{preset:['default',{discardComments:{removeAll:true}}],},cssProcessorOptions:{// 解决没有source map问题map:{inline:false,annotation:true,}}})

运行指令：

npm run build
serve -s build 

压缩html

修改插件配置

newHtmlWebpackPlugin({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,}})

运行指令：

npm run build
serve -s dist 

以上就是webpack生产环境的配置，可以生成打包后的文件。

本期推荐

最近几年Vue越来越火热，BAT等互联网大厂都在前端职位招聘中加入了精通Vue.js框架的要求，就连饿了么公司的技术团队也专门为Vue.js设计了UI框架体系。本书的实操案例都是笔者独立完成的实际项目，有着对标市场实际需求的参考价值，同时本书提供的框架模式可以让读者应用于其他项目，从而提高开发效率，减少开发弯路。

本书从Vue.js框架技术的基础概念出发，逐步深入Vue.js进阶实战，并在最后配合一个网站项目和一个后台系统开发实战案例，重点介绍了使用Vue.js+axios+ElementUI+wangEditor进行前端开发和使用组件进行Vue单页面网页复用，让读者不但可以系统地学习Vue.js前端开发框架的相关知识，而且还能对业务逻辑的分析思路、实际应用开发有更为深入的理解。
本书语言平实，用词诙谐，案例丰富，实用性强，特别适合刚入社会的职场新人、Vue.js框架的初级读者和进阶读者阅读，也适合希望从后台开发转型做前端的程序员等其他编程爱好者阅读。另外，本书也适合作为相关培训机构的教材使用。