5、使用webpack打包样式

小鱼儿亮亮
887 阅读2分钟

一、使用webpack打包css样式（.css普通样式）

1、安装需要的loader(style-loader和css-loader)

npm install style-loader css-loader -D

loader的执行顺序是从下到上，从右到左 css-loader 分析出css文件之间的关系，并合并成一个css文件 style-loader 会把css-loader生成的css内容挂在到页面的head部分 所以要打包css文件，需要css-loader和style-loader配合使用


2、在webapck配置文件（webpack.config.js）中配置打包css文件的规则

// 引入node的path模块
const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'main.js', // 输出的文件名
    path: path.resolve(__dirname, 'dist') // 输出文件的路径（__dirname指该配置文件所在的目录）
  },
  module: {
    rules: [
      // 打包样式的规则
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] 
        // loader的执行顺序是从下到上，从右到左; 
        // css-loader合并css文件,style-loader生成的css内容挂在到页面的head部分。
      }
    ]
  }
}

style-loader 官方文档

css-loader 官方文档


二、使用webpack打包sass样式（.scss文件）

1、安装需要的依赖(sass-loader和node-sass)

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

安装node-sass失败可以参考 github.com/lmk123/blog… 建议用 dart-sass 替换 node-sass 了！dart-sass 兼容 node-sass 的 API。


2、在webapck配置文件（webpack.config.js）中配置打包css文件的规则

// 引入node的path模块
const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'main.js', // 输出的文件名
    path: path.resolve(__dirname, 'dist') // 输出文件的路径（__dirname指该配置文件所在的目录）
  },
  module: {
    rules: [
      // 打包样式的规则
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'] 
        // loader的执行顺序是从下到上，从右到左;
        // sass-loader编译sass语法，css-loader合并css文件,style-loader生成的css内容挂在到页面的head部分。
      }
    ]
  }
}

css-loader 官方文档


三、使用postcss-loader为css3中的新特性添加不同浏览器的私有前缀

1、安装postcss-loader

npm i -D postcss-loader

postcss-loader 用来对.css 文件进行处理，并添加在 style-loader 和 css-loader 之后。 通过 PostCSS 强大的插件体系，可以对 CSS 进行各种不同的转换和处理


2、新建一个postcss的配置文件（postcss.config.js），在配置文件中引入插件autoprefixer。

（1）先安装插件autoprefixer

npm install autoprefixer -D

（2）再在postcss配置文件（postcss.config.js）中引入该插件

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

3、在webapck配置文件（webpack.config.js）中配置打包css文件的规则

// 引入node的path模块
const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'main.js', // 输出的文件名
    path: path.resolve(__dirname, 'dist') // 输出文件的路径（__dirname指该配置文件所在的目录）
  },
  module: {
    rules: [
      // 打包样式的规则
      {
        test: /\.scss$/,
        // loader的执行顺序是从下到上，从右到左;
        use: [
          'style-loader',  // style-loader生成的css内容挂在到页面的head部分
          'css-loader',  // css-loader合并css文件
          'sass-loader', // sass-loader编译sass语法
          'postcss-loader' // 用来对.css 文件进行处理(这里是使用autoprefixer插件为css3特性加上浏览器私有前缀)
        ]
      }
    ]
  }
}

4、在package.json中添加browserslist属性，设置兼容的浏览器版本

{
  "name": "learnwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.0.4",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "node-sass": "^5.0.0",
    "postcss-loader": "^4.1.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^4.1.0"
  },
  "dependencies": {},
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

"> 1%" // 兼容市场占有率大于1%的浏览器（世界范围） "last 2 versions", // 兼容浏览器的最近两个版本 "not ie <= 8" // 不兼容IE8以及以下的浏览器

postcss-loader 官方文档

avatar
文章
阅读
粉丝