- 全局安装Webpack（尽量在项目目录中执行cmd命令）
npm install -g webpack webpack-cli
- 在项目目录的js目录中创建几个js文件（之间的关联任意）。例如common.js、index.js、about.js、main.js(入口js文件)等等
- 打包（只打包js文件）
- 在项目根目录中创建配置文件webpack.config.js（文件名最好固定，内容结构固定）
// Node.js内置模块
const path = require("path");
module.exports = {
// 配置入口文件
entry: "./src/assets/js/main.js",
output: {
// 输出路径，__dirname：当前文件所在路径，最好事先创建好
path: path.resolve(__dirname, "./dist"),
// 输出文件
filename: "bundle.js"
}
}
- 命令行执行编译命令
- cmd窗口执行
webpack # 这个会有警告信息
或者
webpack --mode=development # 这个没有警告信息
- 完成js文件的打包
- 同样在项目目录的css目录中创建几个css文件，然后在main.js(入口js文件)引入css文件
- 安装css加载工具
npm install --save-dev style-loader css-loader
- 上面的webpack.config.js配置文件中添加内容（和output键同级）
module: {
rules: [
{
// 打包规则应用到以css结尾的文件上
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
- 打包执行同样的命令即可
Original: https://www.cnblogs.com/aitiknowledge/p/15933259.html
Author: xsha_h
Title: Webpack的使用
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/608476/
转载文章受原作者版权保护。转载请注明原作者出处！