现在的网页开发都会拥有一系列的依赖，处理这些复杂、麻烦的依赖就应运而生了一些前端打包工具:webpack、rollup、grunt、gulp等
由于项目中使用居多的是webpack，所以就将webpack简单的使用方法进行了如下的整理,希望对大家有用~~
1、webpack的作用:
其实就是一个JavaScript应用程序的静态模块打包器
webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时,他会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。
2、webpack创建流程
1⃣️安装node.js
创建package.json文件: 记录项目所需要的模块以及版本
命令: npm init
2⃣️安装webpack
npm install --save-dev webpack
npm install --save-dev webpack-cli
3、默认打包
默认entry 入口 src/index.js //自己手动创建
默认output 出口 dist/main.js
4、打包模式:
webpack --mode development //开发模式 生成的文件不会被压缩
webpakc --mode production //生产模式 生成的文件会被压缩
在package.json中的 script属性添加:
"dev": "webpack --mode development" //可以使用npm run dev 运行程序
"build": "webpack --mode production" //可以使用npm run build 打包程序
5、配置config文件
(1)、在package.json 的同级目录创建一个webpack.config.js文件
(2)、entry： 入口文件
单入口:
单文件: eg: entry： './src/index.js'
多文件: // 在你想要多个依赖文件一起注入,并且将他们的依赖导向到一个"chunk"(打包口的一个文件)时,传入数组的方式就很有用
eg: entry: ['./src/index.js', './src/index1.js', ...]
多入口：将几个文件单独分离出来
entry：{
pageOne: "./src/pageOne/index.js",
pageTwo: "./src/pageTwo/index.js",
pageThree: "./src/pageThree/index.js",
}
(3)、output： 出口文件
单出口:
output:{
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
多出口: 和多入口搭配使用
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js', name 是多入口的 key值
}
(4)配置webpack-dev-server
1、了解webpack-dev-server
webpack-dev-server是用来配置本地服务器,使用它可以为webpack打包生成的资源文件提供web服务
webpack-dev-server主要提供两个功能
1、为静态资源提供web服务
2、自动刷新和热替换(HMR)
2、安装webpack-dev-server
npm instal webpack-dev-server --save-dev
3、配置webpack.config.js
devServer: {
contentBase: './build', //设置服务器访问的基本目录
host: 'localhost',
port: '8000',
open: true //自动打开页面？
}
4、配置package.json
"start": "webpack-dev-server --model development"
(5)常用loader使用方式
1、作用:loader(让webpack能够处理那些非js文件),loader可以将所有类型的文件转换为webpack能够处理的有效模块
2、加载CSS
安装style-loader 和 css-loader
下载 npm install style-loader css-loader --save-dev
配置loader
在webpack.config.js文件中配置module 中的rules
在webpack的配置中loader有两个目标
1、test 属性,用于标识出应该被对应的loader进行转换的某个或某些文件
2、use 属性,表示进行转换时,应该使用哪个loader
对于css文件需要两个loader css-loader、style-loader
只加入css-loader样式不起作用
所以需要两个loader(style-loader 必须写在前面要不打包会出错)
3、加载less和sass
less
less处理效果
@ 10px;
@height: @width + 10px;
#header{
@width;
height: @height;
}
转换后
#header{
10px;
height: 20px
}
安装 less-loader 和 less
npm install less-loader less --save-dev
配置webpack.config.js文件中的module 中的rules
{
test: /.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
sass
安装 asss-loader 和 node-sass
npm install sass-loader node-sass --save-dev
配置 webpack.config.js文件中的module中的rules
{
test: /.less$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
4、PostCSS处理浏览器前缀
处理效果:
#header{
display: flex;
100px;
height: 100px;
}
处理后:
#header{
display: -webkit-box;
display: -webkit-flex;
display: flex;
100px;
height: 100px;
}
安装loader
安装postcss-loader 和 autoprefixer
下载 npm install postcss-loader autoprefixer --save-dev
配置: webpack.config.js 有三种方式:
方式一:
use: ['style-loader', 'css-loader', 'sass-loader', {
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')({
browsers: [
"ie >= 8",
"Firefox >= 20",
"Safari >= 5",
"Android >= 4",
"Ios >= 6",
"last 4 version"
]
})
]
}
}]
方式二:
use: ['style-loader', 'css-loader', 'sass-loader', {
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')
]
}
}]
需要在 package.json 中配置浏览器版本
"browserslist": [
"ie >= 8",
"Firefox >= 20",
"Safari >= 5",
"Android >= 4",
"Ios >= 6",
"last 4 version"
]
方式三: 建议使用这一种方式
use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
添加postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
};
需要在 package.json 中配置浏览器版本
"browserslist": [
"ie >= 8",
"Firefox >= 20",
"Safari >= 5",
"Android >= 4",
"Ios >= 6",
"last 4 version"
]
5、文件处理
图片处理
安装loader
下载 file-loader
npm install file-loader --save-dev
配置config文件
module: {
rules: [
{
test: /.(png|jpg|gif|jpeg)$/,
use: 'file-loader'
}
]
}
选项配置:
module: {
rules: [
{
test: /.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'file-loader',
options: {
name: '为你的文件配置自定义文件名模版',
context: '配置自定义文件的上下文,默认为webpack.config.js', [path] 相对于这个目录的相对目录
pubilcPath: '为你的文件配置自定义public 发布目录', //可以设置域名
outputPath: '为你的文件配置自定义output输出目录'
}
}
]
}
]
}
字体文件处理
下载字体文件
以bootstrap字体文件为例子
BootStrap字体文件下载地址: https://v3.bootcss.com/getting-started/
配置config文件
module: {
rules: [
{
test: /.(ttf|woff2|eot|svg)$/,
use: [{
loader: 'file-loader',
options: {
outputPath: 'font/'
}
}]
}
]
}
第三方js库处理
以Jquery为例子
(1)本地导入:
编写配置文件
webpack.ProvidePlugin参数是键值对形式，键就是我们项目中使用的变量,值就是键所指向的库。webpack.ProvidePlugin会先从npm安装的包中查找是否有符合的库
如果webpack配置了resolve.alias选项(理解成"别名"),那么webpack.ProvidePlugin就会顺着设置的路径一直找下去
使用webpack.ProvidePlugin前需要引入webpack
const webpack = require('webpack')
resolve: {
alias: {
jQuery: path.resolve(__dirname, 'public/js/jQuery.min.js')
}
},
plugins: [
new webpack.ProvidePlugin({
jQuery: "jQuery"
})
]
(2)npm 安装 jquery
命令: npm install jquery --save-dev
在需要使用的js文件中使用 import $ from 'jquery'
6、使用babel-loader编译ES6
babel转换语法所需要的依赖
babel-loader: 负责ES6语法转换
babel-core: babel核心包
babel-preset-env: 告诉babel使用那种转码规则进行文件处理
安装依赖:
npm install babel-loader @babel/core @babel/preset-env --save-dev
配置config文件:
exclude表示不在指定目录查找相关文件
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
新建.babelrc文件配置转换规则
{
"presets":["@babel/preset-env"]
}
另一种配置方法:
在config文件中
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: 'babel-loader',
options: {
preset: ['@babel/preset-env']
}
}
]
}