【webpack】webpack入门--loader使用

webpack的强大，在于有丰富的loader和插件。loader能够将浏览器环境原生不认识的文件转化为自己能够认识的文件。我们用css文件继续做个测试。
新建一个main.css文件

#app{
  text-align: center
}

现在我们的项目目录如下

.
├── config
├── index.html
├── main.css
├── main.js
├── node_modules
├── package-lock.json
├── package.json
└── show.js

现在我们直接用npm run build进行打包，会报错

ERROR in ./main.css 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
> #app{
|   text-align: center
| }
 @ ./main.js 1:0-21

表示我们需要安装一个loader来处理这个文件类型。
安装css-loader和style-loader
css-loader用于解析css文件
style-loader用于将解析css文件后的内容生成<style><style>样式
配置好webpack.dev.js文件

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

webpack中是自下而上使用loader的，因此我们必须要将css-loader放在style-laoder后面，为的是解析后css文件后再生成样式。
我们再次打包，可以看见打包成功，用浏览器打开index.html，可以看见字体也居中了。