webpack 使用Loader 打包静态资源 - 样式1

我们接下来要实现一下样式文件的打包。

首先，我们在 src 下新建一个文件 index.css，代码如下。

.pic {
  width: 150px;
  height: 150px;
}

然后在 index.js 中引入它，并使用这个样式。

import gz from './gz.png';
import './index.css';

var img = new Image();
img.src = gz;
img.classList.add('pic');

var root = document.getElementById("root");
root.append(img);

这个时候，如果使用打包命令的话，会报错，如下。

ERROR in ./src/index.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .pic {
|   width: 150px;
|   height: 150px;
 @ ./src/index.js 10:0-21

因为这时候webpack 还不知道怎么处理css 文件。

我们先去 webpack.config.js 中配置一下。(css 的话需要两个loader)

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [{
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'imgs/',
          limit: 20480
        }
      }
    }, {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader']
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'bundle')
  }
}

然后 用命令安装一下这两个loader：

npm install style-loader css-loader --save-dev

下载好后。

打包，然后网页上确实使用了这个样式。

如果我们使用 Less，Sass，Stylus 这种编译css 的话，要怎样配置呢。

我们以Sass 为例，将index.css 改为index.scss 。

依据webpack > documentation > loaders 中sass-loader 所讲的，我们需要先下载 sass-loader , node-sass 两个包

使用命令【注意别漏了“webpack” 否则的话不能下载】

npm install sass-loader node-sass webpack --save-dev

然后，打包。即可运行。

另外，当我们使用一些css3 样式时，总要加上浏览器的厂商前缀，比如transform 属性。这就非常麻烦，而这种事情也有loader 可以帮我们实现，就是postcss-loader。

webpack.config.js 如下。

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [{
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'imgs/',
          limit: 20480
        }
      }
    }, {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'bundle')
  }
}

然后我们安装 postcss-loader.

npm install postcss-loader --save-dev

安装好后。我们根据官网，它需要我们在目录下创建一个 postcss.config.js 文件，在这个文件里配置。

嗯，我们需要安装一个插件 autoprefixer .

使用命令 npm install autoprefixer --save-dev

安装好了后，我们去使用它，在postcss.config.js 中配置。如下

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

好啦，然后打包。页面上就可以运行啦。