注意:像lodash/collection这样没有相对路径的导入是导入安装在/node_modules的模块,你自己的模块需要一个类似./people的相对路径,你可以以此区分它们。
加载器
我们已经介绍过,你可以通过配置像babel-loader这样的加载器来告诉webpack在遇到不同文件类型的导入时该怎么做。你可以将多个加载器组合在一起,应用到很多文件转换中。在JS中导入.sass文件是一个非常的例子。
Sass
这种转换涉及三个单独的加载器和node-sass库:
npm install css-loader style-loader sass-loader node-sass --save-dev
在配置文件中为.scss文件添加新规则。
// webpack.config.js rules: [{ test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ] }, { // ... }]
注意: 任何时候更改webpack.config.js中的任意一个加载规则都需要使用Ctrl + C和npm start重新启动构建。
加载器序列以相反的顺序进行处理:
sass-loader 将Sass转换为CSS。
css-loader 将CSS解析为JavaScript并解析所有依赖。
style-loader将我们的CSS输出到文档中的