webpack配置css文件

1. webpack 处理 js 文件

• webpack 会自动处理 js 文件和 js 文件之间的依赖。

• 配置 webpack.config.js 文件，就可以在运行的时候使用 webpack 来代替 webpack './src/main.js' './dist/bundle.js' 。且会优先使用 本地 webpack 而非全局版本。

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  }
} 

• 配置 package.js 文件可以精化 webpack 为 npm run build。

scripts: {
  "build": "webpack"
}

2. webpack 处理 css 文件

• 此时的 webpack 命令并不支持处理 css 文件（将 scss、less 转化成 css），我们需要扩展 loader 。

• 不同的文件处理会使用到不同的 loader。

  • 将高级的 ES6 语法转化成 ES5 代码。
  • 将 TypeScript 转化成 ES5 代码。
  • 将 .jsx .vue 转化成 .js 代码。

• loader 的使用步骤：

  • 使用 npm 安装你需要的 loader 。
  • 在 webpack.config.js 的 modules 关键字下进行配置。