1、创建项目
执行npm init -y，初始化包管理配置文件package.json
2、新建src源代码目录，新建src/index.html和src/index.js脚本文件
3、npm install jquery -S
4、index.js
//使用ES6导入语法
import $ from 'jquery'
$(function(){
$('li:odd').css('background-color','pink')
})
在index.html中引用index.js <script src='./index.js'></script>
5、安装webpack
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
6、项目配置webpack
①在项目根目录中，创建名webpack.config.js的webpack配置文件，并初始化如下的基本配置:
const path=require('path')
module.exports = {
entry:{
index:path.join(__dirname, './src/index.js')
},
output:{
filename:'main.js',
path:path.resolve(__dirname,'./dist')
},
mode: 'development' //mode用来指定构建模式。可选值有development 和 production(会压缩打包文件)
}
②在package.json 的 scripts节点下，新增dev脚本如下:
"scripts" : {
"dev" : "webpack" //script节点下的脚本，可以通过npm run 执行。例如npm run dev
"build" : "webpack --mode production" //打包发布
}
③在终端中运行npm run dev命令，启动webpack进行项目的打包构建
7、引用dist下js
在index.html中引用index.js <script src='../dist/main.js'></script>
8、webpack插件
① webpack-dev-server，修改源代码不需要每次重新npm run dev
npm install webpack-dev-server@3.11.2 -D
修改package.json -> scripts 中的dev命令如下:
"scripts": {
"dev" :"webpack serve"，//script节点下的脚本，可以通过 npm run 执行
}
再次运行npm run dev命令，重新进行项目的打包
在浏览器中访问http://localhost:8080地址，查看自动打包效果
在index.html中引用index.js <script src='/main.js'></script> 读取内存中的main.js
②html-webpack-plugin 复制src/index.html到根目录，方便访问http://localhost:8080地址时不再次点击src目录
npm install html-webpack-plugin@5.3.2 -D
//导入 html-webpack-plugin这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
//new构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
//指定要复制哪个页面
template: './src/index.html ',
//指定复制出来的文件名和存放路径
filename: './index.html'
})
//在moudle.exports中加入
plugins: [htmlPlugin]
//在moudle.exports中加入
devServer: {
//首次打包成功后，自动打开浏览器
open: true,
port: 8080,
//指定运行的主机地址
host:'127.0.0.1'
}
在index.html中会自动填充内存的index.js <script src='/main.js'></script> ，所以页面中的引用去掉就可以
8、webpack的loader
①babel-loader 打包高级js语法，例如装饰器
npm install -D babel-loader @babel/core @babel/plugin-proposal-decorators (另一个视频 @babel/ plugin-proposal-class-properties)
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader'
}
}
]
babel.config.js
module.exports =
{ "plugins": [["@babel/plugin-proposal-decorators",{legacy:true}] ]}
9、webpack配置
SourceMap
devtool 开发环境为eval-source-map(定位正确行号，显示源码)，生产环境为nosources-source-map(定位正确行号，不显示源码)