1.基本使用
首先电脑得有node。node-v查看版本
1.初始化包环境 yarn init
2.安装依赖包
yarn add webpack webpack-cli -D
npm install webpack webpack-cli --save-dev
3.在文件夹中建立一个src文件夹，其中加入index.js 里面写个console.log就行。
4.建立一个配置文件与 src 同一级，webpack.config.js。里面写的代码是CommonJS语法。
//CommonJS语法
const path = require('path')//首先我们要先引入node.js的path包，专门管理路径相关的模块
module.exports = {
mode: 'development', //定义模式，这里是‘开发模式’,
//‘生产环境’是production
//定义打包的入口，path.join()方法拼接路径
entry: path.join(__dirname,'src','index.js'),
//__dirname指的是当下这个文件所位于的目录
//定义打包好的文件 位置 文件名
output:{
path: path.join(__dirname,'dist'),//一般设置在dist文件，他会自动生成
filename: 'bundle.js'//文件名
}
}
5.在package.json里面配置一条脚本
{
...
"scripts":{
"build":"webpack"
},
...
}
6.执行命令
yarn build或者npm run build。
2.使用HtmlWebpackPlugin
第一节讲的是打包js文件，这里将打包html文件，那么在src下建立一个index.html文件
1.安装这个插件
yarn add html-webpack-plugin -D
npm install html-webpack-plugin --save-dev
2.在webpack.config.js文件中，添加新的配置项
//CommonJS语法
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: path.join(__dirname,'src','index.js'),
output:{
path: path.join(__dirname,'dist'),
filename: 'bundle.js'
},
plugins:[ //是一个数组
new HtmlWebpackPlugin({ //实例化
//1.选择html模板文件
template:path.join(__dirname,'src','index.html'),
filename:'index.html',
})
]
}
3.执行命令
现在执行命令呢，dist里面就会多出一个index.html文件了。并且它会自动的引入我们打包的bundle.js文件。
3.使用webpack-dev-server
在之前的基础上呢，如果我们临时地对里面的文件进行修改，是需要重新打包，才能让我们的页面发生改变的。非常不方便嗷。所以就需要我们这个新的工具来帮忙。
1.安装工具
yarn add webpack-dev-server -D
npm install webpack-dev-server --save-dev
2.在webpack.config.js文件中，添加新的配置项
//CommonJS语法
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: path.join(__dirname,'src','index.js'),
output:{
path: path.join(__dirname,'dist'),
filename: 'bundle.js'
},
plugins:[
new HtmlWebpackPlugin({
template:path.join(__dirname,'src','index.html'),
filename:'index.html',
})
],
devServer:{
//定义端口,像vue的脚手架是运行在8080
port:8000,
//devServer要使用的静态资源的目录位置，dist里面的内容
static: path.join(__dirname,'dist'),
progress:true, //打包时显示进度条
open:true, //启动服务器后，自动打开浏览器
compress:true //开启gzip压缩
}
}
3.到package.json里面配置脚本
"scripts":{
"build":"webpack",
"dev":"webpack-dev-server"
}
4.执行脚本
yarn dev
npm run dev
这样一来每次修改代码就可以实时编译了。但是这里要知道，使用这个方式生成的文件，它会存在内存里面 ，而不会生成一个真正的dist文件。所以即便是没有dist文件夹，依旧是可以到8000端口去看到的。
4.编译ES6代码
我们在js文件中，写入一段es6代码，比如一段箭头函数。那么编译以后的代码我们去查看，会发现同样是箭头函数。那么就会导致在一些低版本的浏览器上看是无法解析的。
所以我们需要工具把es6代码转换成所有浏览器都能运行的es5代码。
它就是 babel。
1.首先安装三个babel相关的依赖
yarn add @babel/core @babel/preset-env babel-loader
npm install @babel/core @babel/preset-env babel-loader
2.在根目录底下，创建一个babel的配置文件。
.babelrc
{
//预设：babel一系列插件的集合
"presets":["@babel/preset-env"]
}
这些插件，就能帮我们把es6代码转换成es5代码。
光写一个配置文件是不够的，还需要有地方使用这个配置。
3.在webpack.config.js文件中，添加新的配置项module
//CommonJS语法
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: path.join(__dirname,'src','index.js'),
output:{
path: path.join(__dirname,'dist'),
filename: 'bundle.js'
},
module:{ //module让我们配置我们解析模块的一些规则
rules:[
{
//使用正则表达式进行检查 如果是一个js文件的话
test: /.js$/,
//那么就会使用babel-loader对js代码进行编译
//它会把刚才的配置文件使用上
loader:['babel-loader']，
//规定处理js文件的范围
include: path.join(__dirname,'src'),
//排除哪些范围里的代码，因为node_modules的代码
//已经编译好了，所以要把它排除在外
exclude: /node_modules/
}
]
}
plugins:[
new HtmlWebpackPlugin({
template:path.join(__dirname,'src','index.html'),
filename:'index.html',
})
],
devServer:{
port:8000,
static: path.join(__dirname,'dist')
}
}
