webpack 基础实战
2022年9月12日配置babel，Babel 是一个 JavaScript 编译器
Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：
- 语法转换
- 通过 Polyfill 方式在目标环境中添加缺失的特性 （通过引入第三方 polyfill 模块，例如 core-js）
- 源码转换（codemods）
1.安装所需要的包
|
1 |
npm install -D babel-loader @babel/core @babel/preset-env webpack |
2.webpack引用babel-loader,需要填写规则
|
1 2 3 4 5 6 7 8 |
module: { rules: [ · · · {test: /\.js$/, use: 'babel-loader'} ] }, |
3.创建 .babelrc 文件，.babelrc是babel的配置文件,填写内容
|
1 2 3 4 5 |
{ "presets": [ "@babel/preset-env" ] } |
配置React JSx
安装所需文件
|
1 |
npm install react react-dom @babel/preset-react -D |
然后将babel配置好，在.babelrc文件中填写
|
1 2 3 4 5 6 |
{ "presets": [ "@babel/preset-env", "@babel/preset-react" //+ 填写这行 ] } |
创建src/search.html用来测试react
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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> <div id="root"></div> </body> </html> |
创建src/search.js用来测试react
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
'use strict'; import React from 'react'; import ReactDOM from 'react-dom'; class Search extends React.Component { render() { return <div className="search-text"> 你好世界 </div>; } } ReactDOM.render( <Search />, document.getElementById('root') ); |
编辑webpack.config.js添加内容
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
· · · plugins: [ · · · new HtmlWebpackPlugin({ template: path.join(__dirname, 'src/search.html'), //源文件路径 filename: 'search.html', //处理后文件名称 chunks: ['search'], //使用那些模块 inject: true, //注入打开 minify: { //压缩 html5: true, //缩小h5标签 collapseWhitespace: true, //折叠空格 preserveLineBreaks: false, //保留换行 minifyCSS: true, //缩小css minifyJS: true, //缩小js removeComments: false //是否删除注释 } }) ] · · · |
解析css
安装
|
1 |
npm i -D style-loader css-loader |
修改webpack.config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
. . . module: { rules: [ . . . { test: /.css$/, use: [ 'style-loader', 'css-loader' ] }, ] } . . . |
创建 src/search.css 测试文件
|
1 2 3 4 |
.search-text{ color: red; font-size: 80px; } |
编写 src/search.js 测试文件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
'use strict'; import React from 'react'; import ReactDOM from 'react-dom'; import './search.css'; class Search extends React.Component { render() { return <div className="search-text"> 你好世界 </div>; } } ReactDOM.render( <Search />, document.getElementById('root') ); |
解析less
安装
|
1 |
npm install less less-loader -D |
修改webpack.config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
. . . module: { rules: [ . . . { test: /.less$/, use: [ "style-loader", "css-loader", "less-loader", ] } ] }, |
file-loader 解析图片字体
安装
|
1 |
npm install file-loader --save-dev |
修改webpack.config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
module: { rules: [ { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] } ] }, |
验证一下图片 src/search.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
'use strict'; import React from 'react'; import ReactDOM from 'react-dom'; import logo from './images/logo.png'; import './search.less'; class Search extends React.Component { render() { return <div className="search-text"> 搜索文字的内容<img src={ logo } /> </div>; } } ReactDOM.render( <Search />, document.getElementById('root') ); |
验证一下字体 src/search.less
|
1 2 3 4 5 6 7 8 9 |
@font-face { src: url('./images/SourceHanSerifSC-Heavy.otf') format('truetype'); font-family: 'SourceHanSerifSC-Heavy'; } .search-text { font-size: 90px; font-weight: 900; color: #0f0; } |
url-loader 就是把资源直接以二进制的形式写入 html src 路径里面
安装
|
1 |
npm install url-loader --save-dev |
修改webpack.config.js
|
1 2 3 4 5 6 7 8 9 |
{ test: /\.(png|svg|jpg|gif)$/, use: [{ loader: 'url-loader', options: { limit: 10240 //资源在10240 字节写入 } }] } |
