官网: https://webpack.js.org/
中文: https://www.webpackjs.com/
webpack1
支持CMD和AMD,同时拥有丰富的plugin和loader,webpack逐渐得到广泛应用。
webpack2
支持ES Module,分析ESModule之间的依赖关系,
webpack1必须将ES,Module转换成CommonJS模块,2支持tree sharking
webpack3
新的特性大都围绕ES Module提出,如Scope Hoisting和Magic Comment;
webpack3以上基本上都可以解决es6提出的模块化
webpack4
可以解决es6模块化【 export default / export import 】
更多个功能性 pulgin【 插件 】 和 loader 【 转换器 】
前端框架中广泛使用: Angular Vue React 的脚手架都是由webpack来进行开发、管理
cli是自动构建一个项目,下面是通过webpack自主构建一个项目
目标:⭐
- 通过webpack自主构建一个项目 【 手动构建一个项目 】
Webpack底层是由 Node.js 来开发的,也就是说Webpack的配置文件都是 Node.js 文件
Webpack的模块化书写的规范是Common.js规范
环境支持: Node.js 8+
⭐前端环境: 【 重点 】
核心关注点在:
安装可以使用任何一个包管理器: npm yarn cnpm
yarn > cnpm > npm
举例: 我使用npm安装了一个叫做 node-sass 的包 ,但是出错了 ,这时,我们想卸载,发现卸载报错
解决: 覆盖安装
cnpm || yarn 进行覆盖安装
cnpm 和 yarn 优先级没有那么绝对,有时cnpm比yarn高,有时反之
文件中首先需要package.json文件,所以要$cnpm init -y
$ npm install webpack webpack-cli -g
$ cnpm install webpack webpack-cli -g
$ yarn add webpack webpack-cli global
$ npm install webpack webpack-cli -D
$ cnpm install webpack webpack-cli -D
$ yarn add webpack webpack-cli -D
局部优先级 > 全局
装了局部,如果使用webpack命令后发现报错说找不到webpack,那么再把全局也装上。
webpack* 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle( 分块束 )
理解: ⭐⭐
举例: 我们有两个模块,A模块引用B模块,我们现在使用webpack打包A模块,webpack会自动寻找A和B之间的关系,进而打包B模块
默认源代码开发目录为: src
默认的入口文件名称为: src/index.js
默认出口目录为: dist
默认出口打包文件名称为: main.js
通过mode来设置是哪个环境下打包使用:
webpack --mode development 开发环境打包
webpack --mode production 生产环境打包
【开发环境打包: 代码不经过压缩、注释不会被删除】
eval 这个方法时用来解析字符串,这个字符串里面有js代码 【 性能不太好 】
安装了webpack 和webpack-cli后,全局命令中就多了一个webpack命令
终端运行 webpack
当我们局部安装了webpack webpack-cli后,发现运行webpack报错命名找不到
默认生成环境打包
webpack --mode development/production 开发环境/生产环境打包
过程:
前提是webpack已经成功安装,建一个src文件夹——src下建一个js文件——终端命令行使用webpack——产生dist文件夹【文件夹中的main.js是存放了压缩的文件,是经过压缩的。如果终端运行的是webpack --mode development 即开发环境打包,那么代码是不经过压缩、且注释不会被删除的】——有了js文件了,那么接下来肯定需要一个html文件把js文件引入一下——查看结果肯定是没问题的。
我们接下来对这个文件进行配置,主要从以下几个方面来着手
1. 基础功能 :入口 出口 文件配置 2. 转换器: loader 3. 插件: plugin 单页面配置 vs 多页面配置 单页面配置指的只有一个入口一个出口的项目 【 推荐 】 多页面配置指的是有多个入口多个出口的项目
/*
webpack配置文件
也是Node.js文件
这个文件也是一个独立的 Common.js 模块
一个入口一个出口
*/
const path = require('path')
// 1. 创建模块
const webpackConfig = {
entry: './src/index.js', //相对路径【网络路径】
output: { //出口目录、文件的配置
path: path.join( __dirname,'dist'), // 磁盘路径 名称随意改
filename: 'js/app.js' // 入口文件将来打包到出口目录中的文件的路径和名称
// 简单来说【给出口文件一个名称和存放路径】
},
mode: 'development'//确定是生产环境还是开发环境的打包,【生产环境不被压缩,且注释不被解析】
}
// 2. 导出模块
module.exports = webpackConfig
举例: 我们有两个模块,A模块引用B模块,我们现在使用webpack打包A模块,webpack会自动寻找A和B之间的关系,进而打包B模块
在src文件夹下建一个module文件夹——里面建一个name.js文件,因为是模块,所以要导出模块——在index.js中引入模块,使用模块——终端运行webpack——此时查看被自动新建出来的js文件中name.js也被打包了——证明了webpack可以解决模块化依赖问题
//name.js
const people = {
id: 1,
name: sunhejie
}
module.exports = people
//index.js
var people = require('../src/module/name.js') //引入
console.log(people.name)
举例: 实现css的使用
/* ------------------------------- 转换器 ------------------------------ */
// 在webpack.config.js中做如下配置:
module: { //这里用来存放转换器的配置
rules: [
// {} //每一个对象就是一个转换器的配置
{//css的处理
test: /\.css$/, // 整个项目下匹配 .css结尾的文件
use: ['style-loader','css-loader'] //两个顺序是不写反的
// 我们需要使用css-loader将css文件编译为js,然后通过style-loader将js处理插入到html文件中【 style 嵌入模式 】
}
]
},
//需要自动刷新: webServer 搭建前端开发服务器
cnpm install webpack-dev-server -g | -D
参数:
命令行
webpack-dev-server --port 8088 --open --mode development
写到webpack.config.js配置文件:
devServer: {//和module同级
port: 8088,
open:true
}
终端运行方式2: webpack-dev-server
把运行命令放到package.json文件: devServer可以不要了
"scripts":{
"dev": "webpack-dev-server --port 8088 --open"
}
终端: npm run dev
先安装转换器需要的包
$ cnpm install [email protected] @babel/core @babel/preset-env -D
配置webpack.config.js
// 在webpack.config.js的module.rules中进行配置
{// 配置优雅降级
test: /\.js$/,
exclude: /node_modules/, // 排除node_models中的js文件
use: [{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}]
}
安装插件需要的第三方包
$ cnpm i html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin')
//添加一个配置项
plugins:[
new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html',//默认到output目录
hash:true,//防止缓存,会给文件后面加入hash
minify:{
removeAttributeQuotes:true//压缩 去掉引号
}
})
]
将webpack编译过得css文件以 css外部引用的形式引入
安装插件
$ cnpm i extract-text-webpack-plugin -D
const ExtractTextWebapckPlugin= require("extract-text-webpack-plugin")
//loader配置:
use: ExtractTextWebapckPlugin.extract({
use: 'css-loader'
}) //不再需要style-loader
//pulgin配置
new ExtractTextWebapckPlugin('css/[name][hash:6].css')
yarn add url-loader file-loader --dev
npm I url-loader file-loader --save-dev
//url-loader 存base64 file-loader存文件(woff mp3)
{
test:/\.(png|jpg|gif)/,
use:[{
loader: 'url-loader',
options: {
limit: 5000,//字节少于5000 ——》 base64 超过5000 file
outputPath: 'images/', 5000意思存到images
}
}]
}
//css中引入 | js动态(模块化) 引入
npm i copy-webpack-plugin -D
const CopyWebpackPlugin = require('copy-webpack-plugin')
//plugin配置
new CopyWebpackPlugin([
{ from: path.resolve(__dirname,'static'), to: path.resolve(__dirname,'build/static') }
])
"dev": "webpack --mode development --config config/webpack.config.dev.js",
"build": "webpack --mode production --config config/webpack.config.prod.js",
"server": "webpack-dev-server --mode development --config config/webpack.config.dev.js"
1.11 错误资源定制
// 在webpack.config.js中添加如下配置项:
devtool: 'source-map'
制定报错信息的源
/*
webpack配置文件
也是Node.js文件
这个文件也是一个独立的 Common.js 模块
*/
const path = require('path')
// 1. 创建模块
const webpackConfig = {
entry: { // 多页面配置,多个入口文件 ,所以放在对象中
//index和main是随意写的key名称,但是这里的key会被打包成最后的出口文件的文件名称
'index': './src/index.js',
'main': './src/main.js'
}, //网络路径( 相对路径 )
output: { //出口目录、文件的配置
path: path.join( __dirname,'dist'), // 磁盘路径
filename: 'js/[name].js' // 入口文件将来打包到出口目录中的文件的路径和名称
},
mode: 'development'//确定是生产环境还是开发环境的打包
}
// 2. 导出模块
module.exports = webpackConfig