前端构建工具:webpack(安装、配置、使用、一些常用loader及插件)
文章目录
几点建议(可略过)
- 一定要有看文档的习惯。好处:(1)避免出现版本升级后不懂用的情况,如webpack3.x到webpack4.x ,就出现了一些老用户配置出错的情况。(2)能锻炼自己的文档查阅能力
- 学习webpack的必要性:因为有很多框架是基本基于webpack去开发,如vue,它的脚手架是直接配置好的,我们要能够看得懂、能调试。
- 建议经常去github上逛逛,比如搜zepto,能看到它的引入方式:下载、在哪个目录、怎么去引。
webpack简介
1.webpack官方中文文档
2.这里讲的是4.x版本。也会简单讲一点与3.x旧版本的用法差异
3.当我们要去了解一个工具,建议可以先去官网看文档,看官方提高的介绍、当前版本等,防止你所参考的视频、文档过了时效性
1.webpack是什么?
一个模态模块(html、js、css、image)的打包器
2.webpack能干什么?
模块化打包。
它能打包成什么样?
1.css、html、js变成一行(把多余的空格和回车都给压缩了)
2.去除注释
3.去除引号
安装
前提:安装了node、npm。
3.x全局安装只用npm install webpack -g
而4.x多了个cli脚手架
(1)全局安装:用npm或cnpm安装
//2个分别安装:
npm install webpack -g
npm install webpack-cli -g
//或2个一起安装:
npm install webpack webpack-cli -g
2.初始化项目,生成package.json:
npm init
进入项目目录,局部安装:会生成node_modules
npm install webpack -S
npm install webpack-cli -S
webpack本身只能打包js
1.在过去的3.x版本命令,如若要把a.js打包成b.js,输入命令webpack a.js b.js即可
2.而4.x版本中,cli(脚手架)有个
默认entry: src/index.js
默认output: dist/main.js
1.在项目目录下,要创建默认入口src/index.js,在入口文件写代码
2.cmd中输入打包命令:webpack
会自动生成默认出口
注意:main.js会默认变成生产环境的代码:变成一行。
从生产环境代码->开发环境代码的打包命令(也叫未压缩打包命令):webpack --mode development
webpack四大核心
四个核心概念:入口(entry)、出口(output)、loader加载程序、插件(plugins)
loader:能让webpack去打包非js文件;插件:有效地打包或压缩css、js、html、图片等。一般loader和插件配合使用
进行能打包js、css、html、图片等的配置
若看不懂在官网文档中的概念里有详细配置过程。
-
webpack本身是打包js的,但若想要打包其它的:必须要进行相关配置
-
配置:
先了解四个核心概念:入口(entry)、出口(output)、loader加载程序、插件(plugins)
loader:能让webpack去打包非js文件;插件:有效地打包或压缩css、js、html、图片等。一般loader和插件配合使用
(1)在项目目录里命名配置文件:webpack.config.js。在里面去配置
(2)配置便捷的非压缩打包命令:
在package.json里可以去配置。配置好就可npm start或npm run start或把start换成其它的。
"scirpt":{ //找到改位置
...
"start": "webpack --mode development" //这儿start可以随便写
},
(3)配置默认入口、出口。之后打包命令依然是webpack
src:开发阶段(写代码)。里面有如index.html、index.js、style.css、1.png等
public:生产阶段(项目要上线)。里面有跟上面一样文件,只不过压缩了
const path = require('path');
module.exports = {
entry: './src/index.js', //路径,可以改
output:{
path: path.resolve(__dirname, 'public'), //路径,可以改
filename: 'bundle.js' //打包后生成什么js
}
};
(4)
配置本地服务器
1)安装:npm install webpack-dev-server -S
2)在webpack.config.js配置:
const path = require('path');
module.exports = {
entry: './src/index.js', //路径,可以改
output:{
path: path.resolve(__dirname, 'public'), //路径,可以改
filename: 'bundle.js' //打包后生成什么js。这儿也可以加hash:bundle-[hash].js,给个随机hash值。但每次改动入口的.js,会重新给hash值,后面会说到插件会自动去拿hash值
},
devServer:{ //配置服务器
contentBase:"./public", //选择本地服务器路径
inline:true //代码实时刷新
//post:"", //选择端口,默认的为8080。
//hot:
}
};
3)在package.json配置便捷的运行命令:npm dev或npm run dev。原来命令:webpack-dev-server
"dev": "webpack-dev-server --open --inline" //open表示自动打开,inline表示代码实时刷新
4)在本地服务器目录下新建个index.html,引入出口文件bundle.js。
注意:如果要改index.html中的内容,都是到入口文件src/index.js里改。改完等一等,有点慢
(之前用浏览器访问是显示本地服务器的目录浏览,现在则是显示index.html)
(5)
配置loader
(loader有很多,需要用时去查)loader列表:https://blog.csdn.net/keliyxyz/article/details/51649429
这儿我们要引入css文件,在index.html中写import’…/css/style.css’;
引入css需要style-loader和css-loader,而如果css想引用图片还需file-loader
1)下载:npm install style-loader css-loader -S、npm install file-loader -S
2)配置:
const path = require('path');
module.exports = {
...
module:{
rules:[
{//还可以options、结合插件去用,后面说。
test:/\.css$/, //打包文件的后缀。正则,\.代表转义.
use: ['style-loader','css-loader'] //要配置全,否则无效
},
{
test:/\.(jpg|png|jpeg)$/, //打包文件的后缀,里面还可写
use: 'file-loader' //要配置全,否则无效
}
]
}
};
配置完打包测试下。
(6)
配置插件
src:开发阶段(写代码)。里面有如index.html、index.js、style.css、1.png等
public:生产阶段(项目要上线)。里面有跟上面一样文件,只不过压缩了
要进行更多插件的配置,就去搜索该插件。
要打包html,就需要html-webpack-plugin。要查看更多配置https://www.npmjs.com/package/html-webpack-tags-plugin
1)下载:npm install html-webpack-plugin -S
2)配置(webpack.config.js)
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin"); //1.引入插件
module.exports = {
...
plugins:[ 2.写配置
new HtmlWebpackPlugin({
template:"./src/index.html" //若无参则不会打包对应内容。模板参数
//filename:"a.html" //可以给过来的index.html改名称
minify:{ //重要,缩小
removeAttributeQuotes:true,//去除引号
removeComments:true,//去除注释
removeEmptyAttributes:true,//去除空属性
collapseWhitespace:true//去除空格
}
})
]
};
其它loader——HTML的img标记
html-withimg-loader 让html支持图片
1.下载(安装):npm install html-withimg-loader -S
2.配置(webpack.config.js)
{
test:/\.html$/, //打包文件的后缀
use: 'html-withimg-loader' //要配置全,否则无效
}
字体图标和把打包文件放入文件夹
这儿我们去bootstrap拿字体图标:引入bootstrap,添加,然后测试下,报错,从这可以拿到字体图标常用的后缀
{
test:/\.(woff|ttf|svg|eot|xttf|woff2)$/, //打包文件的后缀
use: 'file-loader?limit=1024&name=./fonts/[names].[ext]' //要配置全,否则无效。加参数:先?后参数:限制大小、定义路径和名称(names代表原名,ext代表原后缀)
}
提取分离CSS
之前已经给出口文件建好了各自目录:img、js、fonts。这儿要建css。有几个坑
1.css提取
插件:extract-text-webpack-plugin
下载:npm install extract-text-webpack-plugin**@next** -S
配置:
...
const EXtractTextPlugin = require("extract-text-webpack-plugin");//1.引入
module.exports = {
rules:[
{//还可以options、结合插件去用,后面说。
test:/\.css$/, //打包文件的后缀。正则,\.代表转义.
use:EXtractTextPlugin.extract({ //把之前的use: ['style-loader','css-loader']改了
fallback:"style-loader",
use:[{
loader:'css-loader',
options:{
minimize:true //css压缩
}
}],
publicPath:"../" //测试后会发现img目录跑到css目录了,要配这个
})
},
...
],
plugins:[
new EXtractTextPlugin('./CSS/[name].css'), //2.配置1
...
]
};
配置babel
核心:babel-core
功能:babel-loader
babel-preset-env
babel-preset-react 支持jsx语法
1.安装(下载)
npm install babel-core babel-loader babel-preset-env babel-preset-react -S
2.配置(2种方法)
方法1:在webpack.config.js里配置(不建议。babel-loader依赖少时才这样)
{
test:/(\.jsx|\.js)$/,
use:{
loader:"babel-loader",
options:{
presets:["env",'react'] //添加功能
}
},
exclude:/node_modules/ //别包含:node_modules。其它的都要ES6转成ES5
}
方法2:(建议。因为你不知道有多少依赖要添加)
先在webpack.config.js里简单配置
{
test:/(\.jsx|\.js)$/,
use:{
loader:"babel-loader"
},
exclude:/node_modules/
}
还要在项目目录下新建与node_modules等同级的文件——.babelrc文件,里面配置:
{
"presets":["env",'react'] //添加功能
}
引入第三方库文件
如jQuery、Bootstrap
1.安装:npm install jquery -S 默认下最新版,若想下其它版本,后面加个@版本号
2.引入:在入口index.js里需要引入,如写import $ from ‘jquery’
常用loader(待补充)
style-loader和css-loader 打包css
file-loader 让css支持图片;打包字体图标
html-withimg-loader 让html支持图片
babel-loader 把ES6转换成ES5语法
常用插件(待补充)
html-webpack-plugin 打包html
extract-text-webpack-plugin 提取分离css