Understand Webpack part 2

2024-04-27 15:15:23

字体：大中小

来源：转载

供稿：网友

Loader

在生成bundle file之前，对原js module做预处理。

loader配置在webpack config文件中的 module 字段中，由loader配置的位置，也可以看出loader是对module做预处理用的。

const config = { ...... , module: { rules: [ { use: 'babel-loader', test: //.js$/ } ] }, ......,}

babel turn ES2015/6/7 code into ES5 code，babel has support for the latest version of javaScript through syntax transformers.

这里写图片描述

npm install --save-dev babel-loader babel-core babel-PReset-env

module: { rules: [ { use: 'babel-loader', test: //.js$/ } ] }

tell babel-core how to process js file

{ "presets": ["babel-preset-env"]}

这里写图片描述

npm install --save-dev css-loader style-loader

use 配置节中的loader 从右向左执行，即：先css-loader，后style-loader

{ use: ['style-loader', 'css-loader'], test: //.css$/}

css-loader 处理 js module 中 css 的 import，

import './style/img.css';

style-loader 将其 import 的结果输出到html中：

<head> <style type="text/css"> img { boder: 10px solid black; } </style></head>

那么，如何将生成的css内容输出到一个单独的css文件中呢？可以配合 extract-text-webpack-plugin install npm install --save-dev extract-text-webpack-plugin

修改 webpack.config.js，添加引用

const ExtractTextPlugin = require('extract-text-webpack-plugin')

修改 loader 配置节：

{ loader: ExtractTextPlugin.extract({ loader: 'css-loader' }), test: //.css$/}

添加plugins配置：

plugins: [ new ExtractTextPlugin('style.css')]

之后，css中的内容已经生成到style.css 文件中了。

学习交流

硬盘分区如何设置准确的分区空间

热门图片

猜你喜欢的新闻

猜你喜欢的关注