1. 安装 node-sass 的时候,踩了不少坑,
先是看到类似 需要安装 python27的报错,去安装了 python 2.7.0,然后 运行 cnpm i node-sass -D,安装了最新版本的,
执行 npm run dev 发现 样式未生效,控制台 报错 :Node Sass version 5.0.0 is incompatible with ^4.0.0.,又去百度了一番,
sass-loader 和 node-sass 的最新版本不匹配,又卸载,安装了 4.14.1 版本的 node-sass。最后终于成功了:
2. url-loader 处理图片和字体
默认情况下,webpack 无法处理 html、js、css 文件中的 url 地址,不管是图片还是字体库。
运行 npm i url-loader -D 安装
2.1 处理图片
- 配置文件 webpack.config.js:
const path = require('path'); const htmlWebpackPlugin = require("html-webpack-plugin") module.exports = { mode: 'development', // 打包为开发模式// 入口配置的对象中,属性为输出的js文件名,属性值为入口文件 entry: { main: './src/main.js'}, // 入口文件,从项目根目录指定output: { // 输出路径和文件名,使用path模块resolve方法将输出路径解析为绝对路径path: path.resolve(__dirname, '/dist/js'), // 将js打包到dist/js的目录filename: "[name].js" // 使用[name]打包出来的js文件会分别按照入口文件配置的属性来命名 },// 只要是插件,一定要放到 plugins 节点中去plugins: [ // 配置插件的节点new htmlWebpackPlugin({ // 创建一个在内存中生成 HTML 页面的插件template: path.join(__dirname, "src/index.html"), // 指定模板页面,将来会根据指定的页面路径,生成内存中的页面filename: 'index.html' // 指定生成页面的名称 }) ], module: { rules: [ { test: /\.css$/ , use: ['style-loader', 'css-loader'] }, // 配置 .css 文件的第三方 loader 规则 { test: /\.less$/ , use: ['style-loader', 'css-loader', 'less-loader'] }, // 配置 .less 文件的第三方 loader 规则 { test: /\.scss$/ , use: ['style-loader', 'css-loader', 'sass-loader'] }, { test: /\.jpg|png|bmp|jpeg|gif$/ , use: 'url-loader'} // 处理图片路径的loader ] } }
- scss 文件:
.parent { width: 500px; height: 500px; background-color: pink; } .son { width: 300px; height: 300px; background-color: blue; background: url('../images/1.jpg'); background-size: cover; }
- index.html:
<div class="parent"> <div class="son"></div> </div>
- 效果如图:
url-loader 默认会把图片转换成 Base64编码格式,减少图片的二次请求。
- limit 属性:
limit 的值是图片大小,单位是 byte
在 limit 大小范围内的图片会使用 url-loader 去解析,转为 base64 的字符串
但是超过 limit 大小的图片 会默认启动 file-loader 去解析
因此提示 " file-loader not find ",需要安装 file-loader
module.exports = { mode: 'development', // 打包为开发模式// 入口配置的对象中,属性为输出的js文件名,属性值为入口文件 entry: { main: './src/main.js'}, // 入口文件,从项目根目录指定output: { // 输出路径和文件名,使用path模块resolve方法将输出路径解析为绝对路径path: path.resolve(__dirname, '/dist/js'), // 将js打包到dist/js的目录filename: "[name].js" // 使用[name]打包出来的js文件会分别按照入口文件配置的属性来命名 },// 只要是插件,一定要放到 plugins 节点中去plugins: [ // 配置插件的节点new htmlWebpackPlugin({ // 创建一个在内存中生成 HTML 页面的插件template: path.join(__dirname, "src/index.html"), // 指定模板页面,将来会根据指定的页面路径,生成内存中的页面filename: 'index.html' // 指定生成页面的名称 }) ], module: { rules: [ { test: /\.css$/ , use: ['style-loader', 'css-loader'] }, // 配置 .css 文件的第三方 loader 规则 { test: /\.less$/ , use: ['style-loader', 'css-loader', 'less-loader'] }, // 配置 .less 文件的第三方 loader 规则 { test: /\.scss$/ , use: ['style-loader', 'css-loader', 'sass-loader'] }, { test: /\.jpg|png|bmp|jpeg|gif$/ , use: [ { loader: 'url-loader', options: { limit: 7000 } } ]} // 处理图片路径的loader ] } }
使用 file-loader 解析后,background 变成了 url 获取图片:
- name 属性:可以指定图片打包后的名称格式
[hash:len]:hash 代表哈希值,最大支持32位,len 可以指定长度
[name]:引用的文件名
[.evt]:文件后缀
module: { rules: [ { test: /\.css$/ , use: ['style-loader', 'css-loader'] }, // 配置 .css 文件的第三方 loader 规则 { test: /\.less$/ , use: ['style-loader', 'css-loader', 'less-loader'] }, // 配置 .less 文件的第三方 loader 规则 { test: /\.scss$/ , use: ['style-loader', 'css-loader', 'sass-loader'] }, { test: /\.jpg|png|bmp|jpeg|gif$/ , include: resolve('src'), use: [ { loader: 'url-loader', options: { limit: 7000,name: '[hash:16]-[name].[ext]'} } ] } // 处理图片路径的loader ] }
效果图:图片名称变成 ' 16位哈希值 ' + ' - ' + ' 原图片名称 '
2.2 处理字体
举例: 引用一个 bootstrap 的字体图标:
index.html:
<div class="parent"> <div class="son"></div> </div> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
main.js 引入 bootstrap.css:
// 注意: 如果要通过路径的形式引入 node_modules 中的文件,可以直接省略 node_modules 这一层目录,直接写 包的名称,然后后面跟上具体的文件路径
import 'bootstrap/dist/css/bootstrap.css'
webpack.config.js:
module: { rules: [ { test: /\.css$/ , use: ['style-loader', 'css-loader'] }, // 配置 .css 文件的第三方 loader 规则{ test: /\.less$/ , use: ['style-loader', 'css-loader', 'less-loader'] }, // 配置 .less 文件的第三方 loader 规则{ test: /\.scss$/ , use: ['style-loader', 'css-loader', 'sass-loader'] }, { test: /\.(jpg|png|bmp|jpeg|gif)$/ , include: resolve('src'), use: [ { loader: 'url-loader', options: { limit: 7000, name: '[hash:16]-[name].[ext]'} } ] }, // 处理图片路径的loader { test: /\.(eot|woff|woff2|svg|ttf)/, use: 'url-loader'} // 处理字体] }
效果如下:
3. Babel
在 webpack 中,默认只能处理一部分 ES6 的新语法,一些更高级的语法是无法处理的,因此需要借助于第三方 loader 去处理,将高级语法转为低级语法之后,会把结果交给webpack 去打包。
通过 Babel,可以将高级语法转为低级语法
1. 在webpack 中,可以运行下面两套命令,安装两套包,来安装 Babel 相关的 loader 功能:
1.1 第一套: cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
1.2 第二套: cnpm i babel-preset-env babel-preset-stage-0 -D
2. 打开 webpack 的配置文件,在 module 节点下的 rules 数组中,添加:
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
注意: 在配置 babel 的 loader 规则时,必须把 node_modules 目录,通过 exclude 选项排除掉,原因有俩:
1. 如果不排除,会把 node_modules 的所有 js 文件都打包编译,非常消耗CPU,打包速度非常慢
2. 就算最终把 所有 node_modules 的 JS 文件转换完了,项目也无法正常运行
3. 在项目的 根目录 中, 新建一个叫做 .babelrc 的 Babel 配置文件,这个配置文件,属于 JSON 格式,所以,在写 .babelrc 配置的时候,必须符合 JSON 语法规范:
不能写注释,字符串必须用双引号
3.1 在 .babelrc 写如下的配置: 可以把 preset 翻译成 语法 的意思
{ "presets": ["env", "stage-0"], "plugins": ["transform-runtime"] }
又出现版本不对应的情况了:
卸载重装即可:
npm un babel-core
cnpm i -D @babel/core
可以参考这些文档:
https://www.jianshu.com/p/e21d19875fbb
https://blog.csdn.net/robot7th/article/details/90115782
- package.json 最终文件:
"devDependencies": {"@babel/core": "^7.13.8","@babel/plugin-proposal-class-properties": "^7.13.0","@babel/plugin-transform-runtime": "^7.13.9","@babel/preset-env": "^7.13.9","babel-loader": "^8.2.2","css-loader": "^5.1.1","file-loader": "^6.2.0","html-webpack-plugin": "^3.2.0","less": "^4.1.1","less-loader": "^7.3.0","node-sass": "^4.14.1","sass-loader": "^7.1.0","style-loader": "^2.0.0","url-loader": "^4.1.1","webpack": "^4.0.0","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.2" }
- .babelrc 文件:
{"presets": ["@babel/preset-env"],"plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"] }
- main.js 书写 class 的静态属性:
class Person { static info = '人类'; } console.log(Person.info);