开发必备的webpack4
首先webpack4建议使用node版本在8.5以上，是由于要兼容新版npm下的npx，cmd中node -v查看node版本。css
1.什么是webpack
WebPack能够看作是模块打包机：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。html
构建就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括以下内容。前端
- 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
- 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
- 代码分割：提取多个页面的公共代码、提取首屏不须要执行部分的代码让其异步加载。
- 模块合并：在采用模块化的项目里会有不少个模块和文件，须要构建功能把模块分类合并成一个文件。
- 自动刷新：监听本地源代码的变化，自动从新构建、刷新浏览器。
- 代码校验：在代码被提交到仓库前须要校验代码是否符合规范，以及单元测试是否经过。
- 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。
构建实际上是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。 构建给前端开发注入了更大的活力，解放了咱们的生产力。node
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 输出结果带彩色，好比：会用红色显示耗时较长的步骤react
-
profile 输出性能数据，能够看到每一步的耗时jquery
-
progress 输出当前编译的进度，以百分比的形式呈现webpack
-
display-modules 默认状况下 node_modules 下的模块会被隐藏，加上这个参数能够显示这些被隐藏的模块git
-
display-error-details 输出详细的错误信息github
-
全局安装web
npm install webpack -g
复制代码
- 本地安装
npm install webpack webpack-cli -D//-D是指开发环境须要，上线不须要，下同；
复制代码
通常推荐本地安装，安装在本身的项目中，否则版本不一样会有不兼容。
3. 快速上手
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
复制代码
4. 配置开发服务器
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. 入口文件的类型
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'
})],
复制代码
6. 支持加载css文件
6.1 什么是Loader
经过使用不一样的Loader，Webpack能够要把不一样的文件都转成JS文件,好比CSS、ES6/七、JSX等
- test：匹配处理文件的扩展名的正则表达式
- use：loader名称，就是你要使用模块的名称
- include/exclude:手动指定必须处理的文件夹或屏蔽不须要处理的文件夹
- query：为loaders提供额外的设置选项
loader三种写法
- use
- loader
- use+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. 支持图片
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;
}
复制代码
8. 自动产出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'
})]
复制代码
9. 分离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/
}
复制代码
10. 编译less 和 sass
npm i less less-loader -D
npm 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/
},
复制代码
11. 处理CSS3属性前缀
为了浏览器的兼容性，有时候咱们必须加入-webkit,-ms,-o,-moz这些前缀
- Trident内核：主要表明为IE浏览器, 前缀为-ms
- Gecko内核：主要表明为Firefox, 前缀为-moz
- Presto内核：主要表明为Opera, 前缀为-o
- Webkit内核：产要表明为Chrome和Safari, 前缀为-webkit
npm i postcss-loader autoprefixer -D
复制代码
postcss.config.js
module.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/
},
复制代码
12. 转义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/
},
复制代码
13. 如何调试打包后的代码
webapck经过配置能够自动给咱们source maps文件，map文件是一种对应编译文件和源文件的方法
- source-map 把映射文件生成到单独的文件，最完整最慢
- cheap-module-source-map 在一个单独的文件中产生一个不带列映射的Map
- eval-source-map 使用eval打包源文件模块,在同一个文件中生成完整sourcemap
- cheap-module-eval-source-map sourcemap和打包后的JS同行显示，没有映射列
devtool:'eval-source-map'
复制代码
14. 拷贝静态文件
有时项目中没有引用的文件也须要打包到目标目录
npm i copy-webpack-plugin -D
复制代码
new CopyWebpackPlugin([{
from: path.join(__dirname,'public'),//静态资源目录源地址
to:'./public' //目标地址，相对于output的path目录
}]),
复制代码
15. 打包前先清空输出目录
npm i clean-webpack-plugin -D
复制代码
new cleanWebpaclPlugin(path.join(__dirname,'dist'))
复制代码
16. 压缩CSS
webpack能够消除未使用的CSS
npm i -D purifycss-webpack purify-css glob
复制代码
new PurifyCSSPlugin({//purifycss根据这个路径配置遍历你的HTML文件，查找你使用的CSS
paths:require('glob').sync(path.join(__dirname,'src/*.html'))
}),
复制代码
17. 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
+ }
},
复制代码
18. 区分环境变量
许多 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('这是生产环境');
}
复制代码
19. 抽离公共部分
optimization:{
splitChunks:{
cacheGroups:{
vendor:{//抽离第三插件
test:/node_module/,
chunks:'initial',
name: 'vendor',
priority:10,//优先级
},
commons:{//抽离公共的js
chunks:'initial',
name:'commons',
minSize: 0//只要超出0字节就生成新的公共的包
}
}
}
},
复制代码
- 从右往左，首先抽离公共部分js（好比两个文件共用的部分）会把第三方（好比jquery）首先打包，此时须要设置优先级priority，第三方插件不会打包到公共部分。
谢谢你看到了最后
相关文章
- 1. [PHP开发必备]
- 2. python 开发必备知识
- 3. 开发者必备网站
- 4. Drupal 开发必备利器
- 5. solr详解，开发必备
- 6. 前端开发必备 - Emmet
- 7. PHP 开发必备软件
- 8. Web前端开发必备
- 9. 8.4 开发必备工具
- 10. android开发必备知识
- 更多相关文章...
- • RSS 发布您的 Feed - RSS 教程
- • PHP 表单 - 必需字段 - PHP教程
- • PHP开发工具
- • JDK13 GA发布：5大特性解读
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 跳槽面试的几个实用小技巧，不妨看看！
- 2. Mac实用技巧 |如何使用Mac系统中自带的预览工具将图片变成黑白色?
- 3. Mac实用技巧 |如何使用Mac系统中自带的预览工具将图片变成黑白色?
- 4. 如何使用Mac系统中自带的预览工具将图片变成黑白色?
- 5. Mac OS非兼容Windows软件运行解决方案——“以VMware & Microsoft Access为例“
- 6. 封装 pyinstaller -F -i b.ico excel.py
- 7. 数据库作业三ER图待完善
- 8. nvm安装使用低版本node.js(非命令安装)
- 9. 如何快速转换图片格式
- 10. 将表格内容分条转换为若干文档
欢迎关注本站公众号,获取更多信息
相关文章
- 1. [PHP开发必备]
- 2. python 开发必备知识
- 3. 开发者必备网站
- 4. Drupal 开发必备利器
- 5. solr详解，开发必备
- 6. 前端开发必备 - Emmet
- 7. PHP 开发必备软件
- 8. Web前端开发必备
- 9. 8.4 开发必备工具
- 10. android开发必备知识