Webpack 是一个前端的静态模块资源打包工具，能让浏览器也支持模块化。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
常用命令
webpack -v 查看版本号
webpack ./js/main.js -o ./js/bundle.js 第一个路径为入口js的路径，第二个路径参数为生成文件的路径
使用配置文件之后，直接使用 webpack 命令，不需要参数也可以打包，配置文件的名字为“webpack.config.js”。
下面是一个完整配置的内容：
// 引用 Node.js 中的 path 模块，处理文件路径的小工具
const path = require("path");
// 1. 导出一个webpack具有特殊属性配置的对象
module.exports = {
// 指定模式配置,取值： none（什么也没有）, development or production(默认的)，不写的话会出现黄色警告
// 如， production 模式打包后 bundle.js是压缩版本的， development则不是压缩的
mode: 'none',
// 入口
entry: './src/main.js', // 入口模块文件路径
// 出口是对象
output: {
// path 必须是一个绝对路径 , __dirname 是当前js的绝对路径：D: \StudentProject\ WebStudy\ webpack - demo2
path: path.join(__dirname, './dist/'), // 打包的结果文件存储目录
filename: 'bundle.js' // 打包的结果文件名
}
}
webpack 应该作为本地安装，并且只需要存在于开发环境中，所以需要安装到开发环境依赖：
npm init -y 初始化项目
npm install webpack@v4.35.2 -D 把webpack安装到项目的开发环境依赖
npm install webpack-cli@3.3.6 -D V4+版本的webpack需要安装cli
然后在 package.json 中添加映射：
"scripts": {
"show": "webpack -v",
"start": "node ./src/main.js",
"build": "webpack"
}
完整的 package.json 配置：
{
"name": "webpack3",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"show": "webpack -v",
"start": "node ./src/main.js",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.35.2",
"webpack-cli": "^3.3.6"
}
}
查看 webpack 版本号：npm run show
运行 main.js 模块：npm run start，如果命令映射的别名是 start ，可省略 run 进行简写执行，即：npm start
打包构建：npm run build
打包完成后，在 html 中引入打包生成的 bundle.js 文件，浏览器就可以正常识别了。
webpack 除了用来打包 js，还可以用来打包其他资源文件，比如 css，图片。
-
打包 css 资源
- 安装打包相关的工具插件：
npm install --save-dev style-loader css-loader，css-loader 是将 css 装载到 javascript，style-loader 是让 javascript 认识 css。 - 在 webpack.config.js 中新增以下配置：
module: { // 模块 rules: [ // 规则 { test: /\.css$/, // 正则表达式，匹配 .css 文件资源 use: [ // 使用的 Loader ,注意顺序不能错 'style-loader', 'css-loader' ] } ] }整个 webpack.config.js 中的配置内容如下：
// 引用 Node.js 中的 path 模块，处理文件路径的小工具 const path = require("path"); // 1. 导出一个webpack具有特殊属性配置的对象 module.exports = { // 指定模式配置,取值： none（什么也没有）, development or production(默认的) // 如， production 模式打包后 bundle.js是压缩版本的， development则不是压缩的 mode: 'none', // 入口 entry: './src/main.js', // 入口模块文件路径 // 出口是对象 output: { // path 必须是一个绝对路径 , __dirname 是当前js的绝对路径：D: \StudentProject\ WebStudy\ webpack - demo2 path: path.join(__dirname, './dist/'), // 打包的结果文件存储目录 filename: 'bundle.js' // 打包的结果文件名 }, module: { // 模块 rules: [ // 规则 { test: /\.css$/, // 正则表达式，匹配 .css 文件资源 use: [ // 使用的 Loader ,注意顺序不能错 'style-loader', 'css-loader' ] } ] } }3.在 src 目录下新建一个 style.css 文件，内容如下：
body { background: red }4.在 main.js 中引入 style.css 文件
// 模块方式导入 css , 最终会打包成js，打包在 bundle.js 中 import './css/style.css'5.打包编译
npm run build最后打开 html 文件，就可以看见 css 已经生效了。
- 安装打包相关的工具插件：
-
打包图片资源
1.安装相关工具npm install --save-dev file-loader2.修改 webpack.config.js 文件配置，内容如下：
// 引用 Node.js 中的 path 模块，处理文件路径的小工具 const path = require("path"); // 1. 导出一个webpack具有特殊属性配置的对象 module.exports = { // 指定模式配置,取值： none（什么也没有）, development or production(默认的) // 如， production 模式打包后 bundle.js是压缩版本的， development则不是压缩的 mode: 'none', // 入口 entry: './src/main.js', // 入口模块文件路径 // 出口是对象 output: { // path 必须是一个绝对路径 , __dirname 是当前js的绝对路径：D: \StudentProject\ WebStudy\ webpack - demo2 path: path.join(__dirname, './dist/'), // 打包的结果文件存储目录 filename: 'bundle.js' // 打包的结果文件名 }, module: { // 模块 rules: [ // 规则 { test: /\.css$/, // 正则表达式，匹配 .css 文件资源 use: [ // 使用的 Loader ,注意顺序不能错 'style-loader', 'css-loader' ] }, { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader', ] } ] } }3.修改 style.css，内容如下：
body { background: red; background-image: url(./1.jpg) }4.打包编译
npm run build5.如果直接访问根目录下的 index.html，那么图片资源路径就无法访问到。
解决方案：就是把 index.html 放到 dist 目录中。
但是 dist 是打包编译的结果，而非源码，所以把 index.html 放到 dist 就不合适。
而且如果我们一旦把打包的结果文件名 bundle.js 改了之后，则 index.html 也要手动修改。
综合以上遇到的问题，可以使用一个插件： html-webpack-plugin 来解决。 -
使用 HtmlWebpackPlugin 插件
作用：解决文件路径问题
将 index.html 打包到 bundle.js 所在目录中
同时也会在 index.html 中自动的
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于