《React+Redux前端开发实战》—1.1.5 Webpack loader实战

1.1.5  Webpack loader实战

　　使用Webpack loader构建项目示例：

　　在前面示例基础上对文本样式进行修改，在根目录下安装loader，命令如下：

　　npm install css-loader style-loader –D

　　（1）新建文件./webpack.config.js，代码如下，其中的rules用来配置loader。

　　module.exports = {

　　    entry: "./a.js",

　　    output: {

　　        path: __dirname,

　　        filename: "bundle.js"

　　    },

　　    mode: "production",

　　    module: {

　　        rules: [

　　            { test: /\.css$/, loader: "style-loader!css-loader" }

　　        ]

　　    }

　　};

　　（2）新建./style.css样式文件，代码如下：

　　body {

　　  color: red;

　　}

　　（3）在a.js中引入样式文件：

　　import "./style.css";

　　此时项目结构如下：

　　.

　　├── a.js

　　├── index.html

　　├── package.json

　　├── style.css

　　└── webpack.config.js

　　（4）在终端执行Webpack命令：

　　webpack

　　Webpack会默认找到webpack.config.js配置文件，直接执行里面的命令，显示结果如图1.4所示。

图1.4  Webpack编译之loader

　　（5）根目录下会再次生成bundle.js文件。打开浏览器后，黑色英文Hello World！的颜色将变为红色。

　　实际项目中，一般不会直接执行Webpack命令，而是在package.json中的scripts内配置：

　　"scripts": {

　　    "a" :"webpack --config ./webpack.config.js"

　　  },

　　其中，参数--config用于指定读取哪个配置文件。如果没有指定--config，Webpack会默认读取webpack.config.js或webpackfile.js文件。项目中通常会配置两三个Webpack配置文件，命名时一般会带上环境，如webpack.config.base.js，webpack.config.dev.js和webpack.config.prod.js。

　　然后在终端执行：

　　npm run a

提示：如果默认安装的package.json文件名为package-lock.json，别忘记修改过来。