铁人12前哨站 - webpack 帮你管(2)

欢迎来到铁人12前哨站的第二篇文章，延续第一篇，今天要继续介绍 webpack 的内容

首先呢，webpack 其本身仅能读取 javascript 和 json 格式的内容，若是我们需要让它读取其他格式的档案就需要透过 loader 来将读取和使用方法餵给 webpack，先介绍基本使用方法吧

loader:
每一条规则基本上最少会需要两个参数，透过 test 配合正则表达式告诉 webpack 要将何种档案进行编译，而后透过 use 告知将要使用什么 loader，不过在使用之前，我们得先透过 npm 将档案下载下来，下方将透过引用 css 为例：

首先透过 npm 将 css-loader 和 style-loader 下载下来

npm install css-loader style-loader

再来呢，进入 webpack.config.js 将规则写进去

module.exports = {    ...    module: {        rules: [            {                test: /\.css$/i, //读取所有档名含有.css的档案，不分大小写                use: [                    'style-loader', //使用 style-loader                    'css-loader' //使用 css-loader                ]            }        ]    }}

在 src 目录内建立一个 style 资料夹，在其内创立一个 style.css 并添加一个样式

.redText{color: red;}

在 src/index.js 中将其引用进来

import './style/style.css'

最后，执行编译指令 npm run start即可看到此样式啰

---

补充昨天的内容，在 webpack 中编译主要分为两种模式，分别为开发模式(development)和生产模式(production)，主要差异在于说生产模式下会将档案进行压缩，虽较不易观看但在产品上线时问题大多都已解决，即可使用生产模式，使用方法如下

package.jsonscripts: {    "start": "webpack --mode=development",    "build": "webpack --mode=production"}

这样就可以根据情况来将档案进行编译啰