Vue--webpack打包css、image资源
前戏
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要结合插件来使用，这些插件在Webpack 中被称为 Loader （加载器） 来进行转换。
Loader 可以理解为是模块和资源的转换器，它本身是一个函数，参数接受的是源文件， 返回值是转换后的结果。
这样，我们就可以通过 require 或 import 来加载任何类型的模块或文件，比如 CSS、 图片。
打包css资源
要打包css资源，要安装 style-loader 和 css-loader 依赖
css-loader 是 将 css 装载到 javascript；
style-loader 是让 javascript 认识 css
npm install --save-dev style-loader css-loader
修改webpack.config.js文件，增加model参数
// 引入node中的path模块，处理文件路径 的小工具 const path = require('path') // 导出一个webpack具有特殊属性配置的对象 module.exports = { mode: 'none', // 指定模式配置："development" | "production" | "none" // 入口 entry: './src/main.js', // 入口模块文件路径 // 出口 output: { // path: './dist/', 错误的，要指定绝对路径 path: path.join(__dirname, './dist/'), //打包的结果文件生成的目录要是绝对路径 filename: 'bundle.js' }, module: { // 模块 rules: [ // 规则 { test: /\.css$/, // 正则表达式，匹配 .css 文件资源,不要加引号 use: [ // 使用的 Loader ,注意顺序不能错 'style-loader', 'css-loader' ] } ] } }
在src文件夹创建 css 文件夹, css文件夹下创建 style.css
style.css
body { background: red;}
在 main.js 只引入 style.css
// 模块方式导入 css , 最终会打包成js，打包在 bundle.js 中 import './css/style.css'
重新打包编译
npm run build
打包后，查看 bundle.js ，发现已经将 css 样式以 js 方式引入了
访问 index.html , 看看背景是不是变成红色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="./dist/bundle.js"></script> </body> </html>
F12查看 index.html 源码后，其实是将 CSS 文件内容转成一个 JavaScript 模块，然后在运行 JavaScript 时，会将样式动态使用 <sytle> 标签作用在页面 <head> 标签下
打包image资源
安装 file-loader 依赖
npm install --save-dev file-loader
修改 webpack.config.js
// 引入node中的path模块，处理文件路径 的小工具 const path = require('path') // 导出一个webpack具有特殊属性配置的对象 module.exports = { mode: 'none', // 指定模式配置："development" | "production" | "none" // 入口 entry: './src/main.js', // 入口模块文件路径 // 出口 output: { // path: './dist/', 错误的，要指定绝对路径 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' ] } ] } }
把1.jpg放在css文件夹下
修改 style.css
body{ background: red; background-image: url(./1.jpg) }
打包编译
npm run build
访问根目录下的 index.html , 背景图并未显示出来
问题：
- 如果直接访问根目录下的 index.html ，那么图片资源路径就无法访问到。
- 解决方案：就是把 index.html 放到 dist 目录中。
- 但是 dist 是打包编译的结果，而非源码，所以把 index.html 放到 dist 就不合适。
- 而且如果我们一旦把打包的结果文件名 bundle.js 改了之后，则 index.html 也要手动修改。
- 综合以上遇到的问题，可以使用一个插件： html-webpack-plugin 来解决。
使用 HtmlWebpackPlugin 插件
现在的目录结构
作用：解决文件路径问题
将 index.html 打包到 bundle.js 所在目录中
同时也会在 index.html 中自动的 <script> 引入 bundle.js
安装插件
npm install --save-dev html-webpack-plugin
修改 webpack.config.js
// 引入node中的path模块，处理文件路径 的小工具 const path = require('path') // 引入插件 const HtmlWebpackPlugin = require('html-webpack-plugin'); // 导出一个webpack具有特殊属性配置的对象 module.exports = { mode: 'none', // 指定模式配置："development" | "production" | "none" // 入口 entry: './src/main.js', // 入口模块文件路径 // 出口 output: { // path: './dist/', 错误的，要指定绝对路径 path: path.join(__dirname, './dist/'), //打包的结果文件生成的目录要是绝对路径 filename: 'bundle.js' }, // 配置插件 plugins: [ new HtmlWebpackPlugin({ // 指定要打包的模板页面 // 就会将 index.html 打包到与 bundle.js 所在同一目录下面， // 同时在 index.html 中会自动的使用script 标签引入bundle.js template: './index.html' }) ], module: { rules: [ //配置转换规则 { test: /\.css$/, // 注意，不要有单引号，正则表达 式，匹配 .css 文件资源 use: [ // 根据外国人的习惯来的顺序，而且顺序不要写错 'style-loader', // js识别css 'css-loader' // css 转换为 js ] }, { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] } ] } }
修改 index.html, 模拟下vue页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 配置了HtmlWebpackPlugin 插件之后 ，不需要手动的引入bundle.js, 因为它会自动的将它引入 --> <!-- <script src="./dist/bundle.js"></script> --> <div id="app"></div> </body> </html>
重新打包
npm run build
运行后，你会发现 dist 目录下多有一个 index.html , 并且文件中自动引入了 bundle.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 配置了HtmlWebpackPlugin 插件之后 ，不需要手动的引入bundle.js, 因为它会自动的将它引入 --> <!-- <script src="./dist/bundle.js"></script> --> <div id="app"></div> <script type="text/javascript" src="bundle.js"></script></body> </html>
运行 dist/index.html 文件，背景图正常显示了。不要运行了 根目录下的 index.html
