21 / 07 / 11

『webpack』基础篇 - 资源解析

ES6

解析ES6

使用babel-loader

babel的配置文件是:.babelrc

webpack.config.js

module.exports = { entry: { index: './src/index.js', search: './src/search.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [ { test: /\.js$/, use: 'babel-loader' } ] }, mode: 'production' }

增加ES6的babel preset配置

创建.babelrc,并在里面写入

安装、配置babel

npm i @babel/core @babel/preset-env babel-loader -D

然后创建.babelrc

{ "presets": [ "@babel/preset-env" ], "plugins": [ "@babel/proposal-class-properties" ] }

React JSX

增加React的babel preset配置

在之前的基础上添加React支持

npm i react react-dom @babel/preset-react -D

然后创建.babelrc,添加@babel/preset-react

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/proposal-class-properties"
    ]
}

在项目的src目录下创建search.js

search.js

'use strict' import React from 'react'; import ReactDOM from 'react-dom' class Search extends React.Component { render() { return ( <div>Search Text</div> ) } } ReactDOM.render( <Search />, document.getElementById('root') )

运行npm run build

在生成的dist文件夹下创建search.html

search.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Search Page</title> </head> <body> <div id="root"></div> <script src="./search.js" type="text/javascript"></script> </body> </html>

CSS

解析CSS

css-loader用于加载.css文件,并且转换成commonjs对象

style-loader将样式通过

webpack.config.js

module.exports = { entry: { index: './src/index.js', search: './src/search.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [ { test: /.js$/, use: 'babel-loader' }, { test: /.css$/, use: [ // style-loader要在css-loader之前引用 'style-loader', 'css-loader' ] }, ] }, mode: 'production' }

在之前的基础上添加CSS支持

npm i style-loader css-loader -D

然后创建search.css

search.css

.search-text { font-size: 20px; color: red; }

修改search.js,引用css

search.js

'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">Search Text</div> ) } } ReactDOM.render( <Search />, document.getElementById('root') )

运行npm run build

解析LESS

less-loader用于将less转换成css

webpack.config.js

module.exports = { entry: { index: './src/index.js', search: './src/search.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [ { test: /.js$/, use: 'babel-loader' }, { test: /.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }, ] }, mode: 'production' }

在之前的基础上添加CSS支持

npm i less less-loader -D

修改search.csssearch.less

search.less

.search-text { font-size: 20px; color: red; }

修改search.less,引用less

search.js

'use strict' import React from 'react'; import ReactDOM from 'react-dom' import './search.less' class Search extends React.Component { render() { return ( <div className="search-text">Search Text</div> ) } } ReactDOM.render( <Search />, document.getElementById('root') )

运行npm run build

图片、字体

解析图片

file-loader用于处理文件

webpack.config.js

module.exports = { entry: { index: './src/index.js', search: './src/search.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [ { test: /.js$/, use: 'babel-loader' }, { test: /.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }, { test: /.(png|svg|jpg|jpeg|gif)$/, use: 'file-loader' }, ] }, mode: 'production' }

在之前的基础上添加File支持

npm i file-loader -D

src文件夹下添加一个images文件夹用来放图片,并在images下加入一个图

修改search.js,引用图片

search.js

'use strict' import React from 'react'; import ReactDOM from 'react-dom' import './search.less' import avatar from './images/avatar.png' class Search extends React.Component { render() { return ( <div> <img src={avatar}/> <div className="search-text">Search Text</div> </div> ) } } ReactDOM.render( <Search />, document.getElementById('root') )

运行npm run build

解析字体

file-loader用于处理文件

webpack.config.js

module.exports = { entry: { index: './src/index.js', search: './src/search.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [ { test: /.js$/, use: 'babel-loader' }, { test: /.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }, { test: /.(png|svg|jpg|jpeg|gif)$/, use: 'file-loader' }, { test: /.(woff|woff2|eot|ttf|otf)$/, use: 'file-loader' } ] }, mode: 'production' }

在之前的基础上添加File支持

npm i file-loader -D

src文件夹下添加一个fonts文件夹用来放图片,并在fonts下加入一个字体文件

修改search.less,引用字体

@font-face { font-family: 'FiraCode-Bold'; src: url('./fonts/FiraCode-Bold.ttf') format('truetype') } .search-text { font-size: 20px; color: red; font-family: 'FiraCode-Bold'; }

运行npm run build

使用url-loader

url-loader也可以处理图片和字体

可以设置较小资源自动base64

webpack.config.js

module.exports = { entry: { index: './src/index.js', search: './src/search.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [ { test: /.js$/, use: 'babel-loader' }, { test: /.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }, { test: /.(png|svg|jpg|jpeg|gif)$/, use: 'url-loader', options: { limit: 10240 } }, { test: /.(woff|woff2|eot|ttf|otf)$/, use: 'file-loader' } ] }, mode: 'production' }

在之前的基础上添加File支持

npm i url-loader -D

运行npm run build