webpack4.0打包总结-白红宇

webpack4.0打包总结

阅读量：4972 次

发布时间：2019-06-12

本文共 9010 字，大约阅读时间需要 30 分钟。

1.webpack概念

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

构建就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容：

代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。构建其实是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。 构建给前端开发注入了更大的活力，解放了我们的生产力。

2.初始化项目

初始化package.json

npm init -y

package.json 文件中

"scripts": {"build": "webpack  --profile --progress --colors --display-error-details","dev": "webpack  --display-modules --profile --progress --colors --display-error-details"},

color 输出结果带彩色，比如：会用红色显示耗时较长的步骤

profile 输出性能数据，可以看到每一步的耗时

progress 输出当前编译的进度，以百分比的形式呈现

display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块

display-error-details 输出详细的错误信息

全局安装

npm install webpack -g

本地安装

npm install webpack webpack-cli -D//-D是指开发环境需要，上线不需要，下同

一般推荐本地安装，安装在自己的项目中，不然版本不同会有不兼容。

3.1 webpack核心概念

Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。

Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。

Loader：模块转换器，用于把模块原内容按照需求转换成新内容。

Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。

Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

3.2 配置webpack

npm install webpack webpack-cli -D

创建src

创建dist

创建index.html

配置文件webpack.config.js

entry：配置入口文件的地址

output：配置出口文件的地址

module：配置模块,主要用来配置不同文件的加载器

plugins：配置插件

devServer：配置开发服务器

// 基于node的遵循commonjs规范的

let path = require('path');//node的模块module.exports = {entry:'./src/index.js', // 入口output:{filename:'build.js',// 这个路径必须是绝对路径path: path.resolve('./dist')}, // 出口devServer:{contentBase:'./dist',port:8080,compress:true,// 服务器压缩open:true,// 自动打开浏览器// hot:true//热更新},// 开发服务器module:{}, // 模块配置plugins:[], // 插件的配置mode:'development', // 可以更改模式resolve:{}, // 配置解析}// 在webpack中如何配置开发服务器 webpack-dev-server

配置开发服务器

npm i webpack-dev-server –D

contentBase 配置开发服务运行时的文件根目录

host：开发服务器监听的主机地址

compress 开发服务器是否启动gzip等压缩

port：开发服务器监听的端口

devServer:{contentBase:path.resolve(__dirname,'dist'),host:'localhost',compress:true,port:8080}//开发服务器"scripts": {"build": "webpack --mode development","dev": "webpack-dev-server --open --mode development "}//开启本地服务 npm run dev

入口文件的类型

5.1单入口+单出口

这种情况很少，一般就以字符串的形式出现即可,例如：

entry: './src/index.js',

5.2 多入口数组形式+单出口

entry:['./src/index.js','./src/a.js']

5.1. 多入口+多出口

有时候我们的页面可以不止一个HTML页面，会有多个页面，所以就需要多入口

entry: {   index: './src/index.js',   main:'./src/main.js'},output: {       path: path.resolve(__dirname, 'dist'),       filename: '[name].[hash].js',       publicPath:PUBLIC_PATH  },   new HtmlWebpackPlugin({               minify: {                   removeAttributeQuotes:true               },               hash: true,               template: './src/index.html',               chunks:['index'],                filename:'index.html'           }),            new HtmlWebpackPlugin({                minify: {                   removeAttributeQuotes:true                },               hash: true,               chunks:['main'],               template: './src/main.html',               filename:'main.html'           })],

支持加载css文件

6.1 什么是Loader

通过使用不同的Loader，Webpack可以要把不同的文件都转成JS文件,比如CSS、ES6/7、JSX等

test：匹配处理文件的扩展名的正则表达式

use：loader名称，就是你要使用模块的名称

include/exclude:手动指定必须处理的文件夹或屏蔽不需要处理的文件夹

query：为loaders提供额外的设置选项

loader三种写法

useloaderuse+loader

6.2 css-loader

npm i style-loader css-loader -D

配置加载器

module: {rules:[{test:/.css$/,use:['style-loader','css-loader'],//从右往左写，webpack特性include:path.join(__dirname,'./src'),exclude:/node_modules/}]},

支持图片

7.1 手动添加图片

npm i file-loader url-loader -D

file-loader 解决CSS等文件中的引入图片路径问题

url-loader 当图片较小的时候会把图片BASE64编码，大于limit参数的时候还是使用file-loader 进行拷贝

let logo=require('./images/logo.png');let img=new Image();img.src=logo;document.body.appendChild(img);{test:/\.(jpg|png|gif|svg)$/,use:'url-loader',include:path.join(__dirname,'./src'),exclude:/node_modules/}

7.2 在CSS中引入图片

还可以在CSS文件中引入图片

.img-bg{background: url(./images/logo.png);width:173px;height:66px;}

自动产出html

8.1 什么是插件

插件是 wepback 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！

插件使用

npm install 插件名 -D

因为插件都是类，引用方式，在plugins数组中 new 插件名即可使用。

8.2 我们希望自动能产出HTML文件，并在里面引入产出后的资源

npm i html-webpack-plugin -D

minify 是对html文件进行压缩，removeAttrubuteQuotes是去掉属性的双引号

hash 引入产出资源的时候加上哈希避免缓存

template 模版路径

plugins: [new HtmlWebpackPlugin({minify: {removeAttributeQuotes:true},hash: true,template: './src/index.html',filename:'index.html'})]

分离CSS

因为CSS的下载和JS可以并行,当一个HTML文件很大的时候，我们可以把CSS单独提取出来加载，webpack4中mini-css-extract-plugin也可以实现，但是目前bug比较多，不能分成多个css。

npm install --save-dev extract-text-webpack-plugin@next

{test:/\.css$/,use: ExtractTextWebpackPlugin.extract({    use:'css-loader'}),include:path.join(__dirname,'./src'),exclude:/node_modules/},plugins: [new ExtractTextWebpackPlugin('css/index.css'),]

处理图片路径问题

const PUBLIC_PATH='/';output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js',publicPath:PUBLIC_PATH},// 指定打包后的图片位置use: [{ loader: 'url-loader', options: {   limit: 1024,  outputPath:'images/' }}],

在HTML中使用图片

npm i html-withimg-loader -D<div class="img-container "><img src="./images/logo.png" alt="logo.png"></div>{test:/.(html|html)$/,use:'html-withimg-loader',include:path.join(__dirname,'./src'),exclude:/node_modules/}

编译less 和 sass

npm i less less-loader -Dnpm i node-saas sass-loader -D@color:orange;.less-container{border:1px solid @color;}$color:green;.sass-container{border:1px solid $color;}const cssExtract=new ExtractTextWebpackPlugin('css.css');const lessExtract=new ExtractTextWebpackPlugin('less.css');const sassExtract=new ExtractTextWebpackPlugin('sass.css');        {            test:/\.less$/,            use: lessExtract.extract({                use:['css-loader','less-loader']            }),            include:path.join(__dirname,'./src'),            exclude:/node_modules/        },        {            test:/\.scss$/,            use: sassExtract.extract({                use:['css-loader','sass-loader']            }),            include:path.join(__dirname,'./src'),            exclude:/node_modules/        },

处理CSS3属性前缀

为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀

Trident内核：主要代表为IE浏览器, 前缀为-ms

Gecko内核：主要代表为Firefox, 前缀为-moz

Presto内核：主要代表为Opera, 前缀为-o

Webkit内核：产要代表为Chrome和Safari, 前缀为-webkit

npm i postcss-loader autoprefixer -Dpostcss-loaderpostcss.config.jsmodule.exports={plugins:[require('autoprefixer')]}.circle {transform: translateX(100px);{            test:/\.css$/,            use: cssExtract.extract({use:['css-loader','postcss-loader']}),include:path.join(__dirname,'./src'),exclude:/node_modules/},}

转义ES6/ES7/JSX

Babel其实是一个编译JavaScript的平台,可以把ES6/ES7,React的JSX转义为ES5

npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-react -D    {    test:/\.jsx?$/,    use: {        loader: 'babel-loader',        options: {            presets: ["env","stage-0","react"]        }    },    include:path.join(__dirname,'./src'),    exclude:/node_modules/    },

如何调试打包后的代码

webapck通过配置可以自动给我们source maps文件，map文件是一种对应编译文件和源文件的方法

source-map 把映射文件生成到单独的文件，最完整最慢cheap-module-source-map 在一个单独的文件中产生一个不带列映射的Mapeval-source-map 使用eval打包源文件模块,在同一个文件中生成完整sourcemapcheap-module-eval-source-map sourcemap和打包后的JS同行显示，没有映射列devtool:'eval-source-map'

拷贝静态文件

有时项目中没有引用的文件也需要打包到目标目录

npm i copy-webpack-plugin -Dnew CopyWebpackPlugin([{        from: path.join(__dirname,'public'),//静态资源目录源地址        to:'./public' //目标地址，相对于output的path目录    }]),

打包前先清空输出目录

npm i clean-webpack-plugin -Dnew cleanWebpaclPlugin(path.join(__dirname,'dist'))

压缩CSS

webpack可以消除未使用的CSS

npm i -D purifycss-webpack purify-css globnew PurifyCSSPlugin({//purifycss根据这个路径配置遍历你的HTML文件，查找你使用的CSSpaths:require('glob').sync(path.join(__dirname,'src/*.html'))}),

resolve解析

17.1 extensions

指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配

resolve: {//自动补全后缀，注意第一个必须是空字符串,后缀一定以点开头extensions: [" ",".js",".css",".json"],},

17.2 alias

配置别名可以加快webpack查找模块的速度

每当引入jquery模块的时候，它会直接引入jqueryPath,而不需要从node_modules文件夹中按模块的查找规则查找

不需要webpack去解析jquery.js文件

const bootstrap=path.join(__dirname,'node_modules/bootstrap/dist/css/bootstrap.css')resolve: {alias: {'bootstrap': bootstrap}},

区分环境变量

许多 library 将通过与 process.env.NODE_ENV 环境变量关联，以决定 library 中应该引用哪些内容。例如，当不处于生产环境中时，某些 library 为了使调试变得容易，可能会添加额外的日志记录(log)和测试(test)。其实，当使用 process.env.NODE_ENV === 'production' 时，一些 library 可能针对具体用户的环境进行代码优化，从而删除或添加一些重要代码。我们可以使用 webpack 内置的 DefinePlugin 为所有的依赖定义这个变量：

npm install cross-env -D"scripts": {"build": "cross-env NODE_ENV=production webpack --mode development","dev": "webpack-dev-server --open --mode development "},plugins: [new webpack.DefinePlugin({NODE_ENV:JSON.stringify(process.env.NODE_ENV)}),if (process.env.NODE_ENV == 'development') {console.log('这是开发环境');} else {console.log('这是生产环境');}

作者：正儿八经的娇娇链接：https://juejin.im/post/5af8fa806fb9a07ac162876d来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处

原文地址：https://segmentfault.com/a/1190000015141775

转载于:https://www.cnblogs.com/lalalagq/articles/9909900.html

你可能感兴趣的文章

PL/SQL Developer 查询的数据有乱码或者where 字段名=字段值查不出来数据

生成php所需要的APNS Service pem证书的步骤

查看>>

JavaWeb之JSON

查看>>

HOT SUMMER 每天都是不一样，积极的去感受生活 C#关闭IE相应的窗口 .

查看>>

windows平台上编译mongdb-cxx-driver

查看>>

optionMenu-普通菜单使用

查看>>

2016-2017-2点集拓扑作业[本科生上课时]讲解视频

查看>>

【MemSQL Start[c]UP 3.0 - Round 1 C】 Pie Rules

struts2.x + Tiles2.x读取多个xml 配置文件

ubuntu16系统磁盘空间/dev/vda1占用满的问题