步骤:
1. 创建项目文件夹 webpackdemo
2. npm init -y 生成package.json
3. 在安装webpack,wepback-cli
在webpackdemo目录下
npm install webpack@5.73.0 webpack-cli@4.10.0 -D
4. 在webpackdemo目录下 安装jquery (生产依赖)
npm install jquery -S
5. 创建index.html (ul ,li ,引入index.js)
创建index.js (import jquery,设置背景颜色)
【验证】直接打开index.html 报错 —浏览器不支持import
6. webpack打包
npx webpack ./index.js
【验证】 多出一个dist目录->main.js
修改index.html引入 改为main.js 再次打开 正确。
除了npx,也可以作为脚本直接运行package.json配置scripts
"xxx":"webpack ./index.js"
运行 使用 npm run xxx
【验证】 多出一个dist目录-》main.js
👸
二:通过webpack.config.js进行打包
1. webpack.config.js
module.exports={ 配置入口,出口}
2. 打包命令
“build”: “webpack”
或者
npx webpack
【验证】 是否是配置的出口文件名称
三、mode
打包时,会有一个警告 , 需要设置时开发模式还是生产模式
mode: 'development'
执行: npm run build
四、插件 HtmlWebpackPlugin
自动生成html文件,并自动引入输出的js
4.1 安装插件
npm install html-webpack-plugin@5.5.0 -D
4.2 配置plugins
new HtmlWebpackPlugin({
template: path.join(__dirname, './index.html'),
filename: 'index.html'
})
五、 loader配置- css配置
webpack默认只认识js 和 json 文件。其他的不认识的。
如果引入了css文件,打包时会报错 。"no loaders"
解决:
安装
npm install css-loader@6.7.1 style-loader@3.3.1 -D
配置loader
//配置loader
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
七、 配置开发服务器
1. 安装 npm install webpack-dev-server@4.10.0 -D
2. 配置
devServer: {
//静态资源目录
static: {
directory: path.join(__dirname, 'dist'),
},
//是否压缩
compress: true,
//端口号
port: 9000,
},
3. 通过 webpack-dev-server 启动服务器
"start": "webpack-dev-server --config mywebpack.config.js"
【验证】执行 npm run start ,
浏览器中打开 [http://localhost:9000](http://localhost:9000)
修改index.js文件内容,发现页面会自动更新,无需再npm run build了
八、 配置html热更新
1. index.js中引入html
2. 安装raw-loader
3. 配置loader
{
test: /\.(htm|html)$/,
use: ['raw-loader']
}
⑨ 安装脚手架 (全局) 今天装好就可以了,后面不用。
npm install -g @vue/cli
创建vue项目
vue create xxxx
cd xxxx
npm run serve
浏览器打开 [http://localhost:8080/](http://localhost:8080/) 看到 vue 。