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-loader
2.修改 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 build
5.如果直接访问根目录下的 index.html,那么图片资源路径就无法访问到。
解决方案:就是把 index.html 放到 dist 目录中。
但是 dist 是打包编译的结果,而非源码,所以把 index.html 放到 dist 就不合适。
而且如果我们一旦把打包的结果文件名 bundle.js 改了之后,则 index.html 也要手动修改。
综合以上遇到的问题,可以使用一个插件: html-webpack-plugin 来解决。 -
使用 HtmlWebpackPlugin 插件
作用:解决文件路径问题
将 index.html 打包到 bundle.js 所在目录中
同时也会在 index.html 中自动的
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于