webpack4 确保使用Node版本 >= 8.9.4
Webpck是一个前端资源加载/打包工具。它根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
官网: https://webpack.js.org/
使用webpack4不再强制需要webpack.congig.js作为打包入口配置文件。
默认入口为’./src’的index和默认出口’./dist’,小型项目可以应用,大型项目不推荐。
ps:在安装包的时候 我使用的是cnpm
不是npm
是因为有淘宝镜像,如果看到这篇文章的同学没有安装 把c去掉就可以。
1-10是webpack的基本配置使用 。11-12是vue组件的配置和打包
- 创建项目 –
- 安装配置webpack –
- 修改打包的入口和出口 –
- 配置自动打包的功能 –
- 配置html-webpack-plugin生成预览的页面 –
- 配置自动打包的相关参数 –
- webpack的加载器(loader)基本使用 –
- 配置postCSS自动添加css的兼容前缀 –
- 打包样式表中的图片和字体文件 –
- (babel)打包处理js文件中的高级语法 –
- 配置vue组件加载器 –
- webpack 打包 –
> 一. webpack的基本使用
- 创建项目空白目录,并运行
npm init -y
命令,初始化包管理配置文件 package.json - 新建 src 源代码目录
- 新建 src -> index.html 首页
- 初始化首页基本的结构
- 运行
npm install jquery -s
命令 安装jquery - 通过模块化的形式,实现列表隔行变色功能
上图是index.html的内容
上图是index.js的内容。
运行index.html是会报错的。这时候就需要webpack来解决兼容的问题。
开始第二步 …
> 二. 在项目中安装和配置webpack
- 运行
cnpm i webpack webpack-cli -D
命令 - 在项目根目录中,创建名为
webpack.config.js
的 webpack 配置文件 - 在 webpack 配置文件中,初始化如下基本配置
module.exports={
mode:'development' // mode用来指定构建模式 开发阶段可用 development 模式
// development转换出来的代码不会被压缩 转换速度较快,production 模式与之相反
// production用于上线阶段
}
- 在 package.json 配置文件的 scripts 节点下,新增 dev 脚本如下
"scripts":{
"dev":"webpack" // script 节点下的脚步 可以通过 npm run执行
}
- 在终端中运行
npm run dev
命令 启动 webpack 进行项目打包。
此时在浏览器中运行 index.html 就不会出错。
> 三. 配置打包的入口和出口
webapck 4.x 版本默认约定:
打包入口文件为 src – index.jx
打包输出文件为 dist – main.js
如果想要修改入口和出口,在webpack.config.js
中新增如下配置
const path = require('path') // 导入node中专门操作路径的模块
module.exports = {
entry:path.join(__dirname, './scr/index.js'), //打包入口文件路径
output:{
path:path.join(__dirname, './dist'), // 输出文件的存放路径
filename:'bundle.js' //输出文件的名称
}
}
配置完如下:
然后重新运行 npm run dev
进行打包
在dist的目录下 会多出一个bundle.js ,修改index.html的js引入文件,重新运行,同样有效。
> 四. 配置自动打包的功能
自动打包是为了避免每次修改都要重新打包这种繁琐的步骤
- 运行
cnpm install webpack-dev-server -D
命令 安装支持项目自动打包的工具 - 修改 package.json -> scripts 中的 dev 命令
"scripts":{
"dev":"webpack-dev-server"
}
- 将 src-> index.html中的script脚本引用路径修改为 “bundle.js”
这里可以理解为在项目的根目录中有个隐藏的 bundle.js - 运行
npm run dev
重新进行打包 - 在浏览器访问
http://localhost:8080
地址 ,查看自动打包效果
此时在页面中修改代码 保存 就会自动编译 不用刷新页面就能看到效果
webpack-dev-server 会启动一个实时打包的 http 服务器
webpack-dev-server 打包生成的输出文件(这里是bundle.js),默认放到了项目根目录中 而且是虚拟的 看不见的
> 五. 配置html-webpack-plugin生成预览的页面
打开 http://localhost:8080
看到的是项目 目录
这里如果想直接看到主页 就需要通过 html-webpack-plugin
配置
- 运行
cnpm install html-webpack-plugin -D
命令 安装生成预览页面的插件 - 修改
webpack.config.js
文件头部区域 添加如下配置
// 导入生产预览页面的插件 得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象
template:'./src/index/html', // 指定要用到的模版文件
filename:'index.html' // 指定生产文件的名称 该名称存在于内存中 目录中不显示
})
- 修改
webpack.congig.js
文件中向外暴露的配置对象 新增如下配置
module.exports = {
plugins = [htmlPlugin] // plugins数组是webpack打包期间会用到的一些插件列表
}
然后 npm run dev
刷新 http://localhost:8080
就能直接看到主页面
> 六. 配置自动打包的相关参数
在打包完成的时候 需要手动在浏览器中输入地址 才能看到页面
如果想自动打开浏览器进入主页 可以参考如下配置
// package.json 中的配置
// --open 打包完成自动打开浏览器页面
// --host 配置IP地址
// --port 配置端口
"scripts":{
"dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
}
然后运行 npm run dev
就会自动打开主页面 并且地址和端口号就是你配置的值
> 七. webpack的加载器(loader)基本使用
webpack默认只能打包处理以.js后缀名结尾的模块,其他非js结尾的文件需要调用loader加载器才可以正常打包,否则就会报错。
loader
加载器可以协助webpack打包处理特定的文件模块 比如:
- less-loader 打包处理 .less 相关文件
- sass-loader 打包处理 .scss 相关的文件
- url-loader 打包处理 css 中宇url路径相关的文件
这里结合实际项目 不需要全部都配置。
【一 css loader配置】
- 运行
cnpm i style-loader css-loader -D
命令 - 在 webpack.config.js 的module->rules 数组中 添加loader规则如下:
// 所有第三方文件模块的批判规则
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']}
]
}
【二 less loader配置】
- 运行 cnpm i less-loader less -D
- 在 webpack.config.js 的module->rules 数组中 添加loader规则如下:
// 所有第三方文件模块的批判规则
module:{
rules:[
{test:/\.less$/,use:['style-loader','css-loader', 'less-loader']}
]
}
【三 scss loader配置】
- 运行 cnpm i sass-loader node-sass -D
- 在 webpack.config.js 的module->rules 数组中 添加loader规则如下:
// 所有第三方文件模块的批判规则
module:{
rules:[
{test:/\.scss$/,use:['style-loader','css-loader', 'sass-loader']}
]
}
测试是否配置成功
我在src目录下新建了css文件夹
在css文件中新建了三个文件 base.css ,base1.less, base2.scss
并在每个样式文件里写了样式,然后在index.js文件导入这三个文件
npm run dev
打包运行 没有报错 并且样式全部生效
> 八. 配置postCSS自动添加css的兼容前缀
主要是处理浏览器的兼容.
- 运行
cnpm i postcss-loader autoprefixer -D
命令 - 在项目根目录中创建postcss的配置文件
postcss.config.js
并初始化配置
const autoprefixer = require('autoprefixer') // 导入自动添加前缀的文件
module.exports = {
plugins:[autoprefixer] // 挂载创建
}
- 在
webpack.config.js
的module->rules 数组中,添加 loader规则如下
module:{
rules:[
{test:/\.scss$/,use:['style-loader','css-loader', 'postcss-loader']}
]
}
> 九. 打包样式表中的图片和字体文件
在项目中有图片和字体资源的时候需要处理一些配置。
这里可以在src目录新建images文件夹然后引入里面的图片进行测试。
- 运行
cnpm i url-loader file-loader -D
命令 - 在
webpack.config.js
的module->rules 数组中,添加loader规则
module:{
rules:[
{
test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
use: 'url-loader?limit=70000'
}
]
}
// ?之后的事loader的参数项
// limit用来指定图片的大小 单位是字节byte 只有小于limit大小的图片 才会被转为base64
// base64的图片加载比较快
> 十. (babel)打包处理js文件中的高级语法
- 安装babel转换器相关的包
cnpm i babel-loader @babel/core @babel/runtime -D
- 安装babel语法插件相关的包
cnpm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
- 在项目根目录下 创建babel配置文件
babel.config.js
并初始化基本配置
module.exports = {
presets:['@babel/preset-env'],
plugins:['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}
- 在
webpack.config.js
的 module->rules 数组中 添加loader规则如下
// exclude 为排除项 表示babel-loader不需要处理mode-modules中的js文件
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
在进行以上配置的时候,我在index.js里面写了一个方法 运行的时候报错了。
配置好之后再运行,就可以输出结果了。
> 十一. webpack 配置 VUE loader
首先在src下新建了一个 components的文件夹 然后在里面新建了 App.vue
然后在index.js 引入App.vue 出现报错
这里通过webpack来进行loader配置
- 运行
cnpm i vue-loader vue-template-compiler -D
- 在
webpack.config.js
配置文件中 添加vue-loader的配置
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module:{
rules:[
// 其他规则
{test:/\.vue$/, use:'vue-loader'}
]
},
plugins:[
// 其他插件
new VueLoaderPlugin() //确保引入这个插件
]
}
> 十二. webpack 打包
在package.json 文件中配置webpack打包命令
该命令默认加载项目根目录的 webpack.config.js
配置文件
"scripts":{
// 用于打包的命令
"build": "webpack -p",
}
npm run build
会生成一个dist文件 可以把这个文件发配到服务器或外网公布等等操作