webpack打包css（1）

撒路耶不冷

已于 2022-09-16 23:41:07 修改

阅读量807

点赞数

分类专栏： webpack 文章标签： webpack

于 2022-09-14 17:27:38 首次发布

本文链接：https://blog.csdn.net/weixin_56817537/article/details/126852803

版权

webpack 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

源码地址：webpack搭建过程: 利用webpack从0到1搭建项目

webpack是什么？

vue项目加载的文件有哪些？

1，npm init 初始化一个包管理配置文件

初始化package.json：
{
   "name":"myOne"//自定义包的名字，上传以后包的名字就是这个名字，与根目录文件的名字无关
   "version": "1.0.0",//版本号
   "main":"index.js"//指定自定义包的入口文件，require（）方法导入包的时候就是导入main所指向文件
   "description": "你好，这里是描述",//   是对这个包的描述
   "keywords": ["myself","dataFormat"],//搜索这个包的时候所填写的关键字
   "license": "ISC"//开源许可协议
}

2，局部安装webpack npm i webpack webpack-cli -D

3，webpack的命令配置

①当使用webpack打包时。实际上是执行了node_modules文件中bin中的webpack指令。 ②可以使用npm提供的npx命令。npx会优先执行node_modules下bin文件夹中的命令 ③ 还可以pack.json中的script节点下配置：在此节点下的的配置的命令可以用npm去执行

"bulid":"webpack"的意思为，当执行npm run build 时相当于与执行了npx webpack。"webpack"是bin文件夹中的命令。npm run bulid会自动去bin中找命令

4，修改打包文件的出口和入口

在项目根目录添加webpack.config.js文件。一般不改这个文件名，如果要修改文件名，需要去pack.json中配置如："bulid":"webpack --config +要修改的文件名"

//这里webpack的配置文件，要用commonjs，es6不能直接识别
const path = require("path");
module.exports = {
  //entry是整个文件的入口，默认打包src下的index.js,这里可以改变
  entry: "./src/main.js",
  //打包后文件的出口
  output: {
    //文件出口的路径要填绝对路径，可以使用__dirname获取当前路径进行拼接
    path: path.resolve(__dirname, "./build"),
    //打包后文件的名字
    filename: "bundle.js"
  }
};

5，配置loader

css-loader: webpack在打包无法将模块化的css文件直接进行打包，需要借助css-loader，因为 css-loader，只是负责将.css文件进行解析，并不会将解析之后的css插入到页面中； style-loader: 希望再完成插入style的操作，那么我们还需要另外一个loader,就是style-loader;把编译好的css内敛到项目中 lessc工具：是一个脱离webpack的工具。npm i less -g就可以实现安装lessc，通过npx lessc +less后缀文件名的指令，可以把less文件编译为css文件。 less-loader: less-loader执行过程中是依赖于lessc这个工具实现的把less转为css的，所以安装less-loader时会把lessc给自动安装上 PostCss工具：是一个通过JavaScripts来转换样式的工具,这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置。但是实现这些功能，我们需要借助于PostCSS对应的插件(plugins)。同样postcss，和less类似，也支持单独使用。

postcss-loader: 可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置。postcss-loader依赖于postcss这个工具，postcss这个工具依赖于postcss的插件。所以我们可以直接安装postcss-loader，就会自动下载其他的依赖，不需要安装postcss postcss-cli。但是每使用到postcss一个插件都需要单独安装并配置，如autoprefixer插件，postcss-preset-env插件；

webpack.config.js配置文件

//这里webpack的配置文件，要用commonjs，es6不能直接识别
const path = require("path");
module.exports = {
  //entry是整个文件的入口，默认打包src下的index.js,这里可以改变
  entry: "./src/main.js",
  //打包后文件的出口
  output: {
    //文件出口的路径要填绝对路径，可以使用__dirname获取当前路径进行拼接
    path: path.resolve(__dirname, "./build"),
    //打包后文件的名字
    filename: "bundle.js"
  },
  //对模块进行的配置
  module: {
    //配置模块的规则
    rules: [
      //处理css文件的loader
      {
        //后跟正则表达式，匹配哪些文件需要使用这个规则
        test: /\.css$/,
        //使用什么loader去处理所匹配的文件,
        //把文件所知用的loader放在数组中，注意loader是有执行顺序的，数组的后面往前执行
        use: [
          "style-loader",
          "css-loader",
          {
            //postcss-loader可以让css适配不同浏览器
            loader: "postcss-loader",
            //postcss-loader的配置项
            options: {
              postcssOptions: {
                //配置postcss所用到的插件
                plugins: [
                  //autoprefixer插件，自动添加浏览器前缀的插件
                  // require("autoprefixer")
                  //postcss-preset-env插件，内置了autoprefixer插件
                  require("postcss-preset-env")
                ]
              }
            }
          }
        ]
      },
      //处理less文件的loader
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"]
      }
    ]
  }
};

6，抽离postcss的插件

如果我们把配置都写在webpack.config.js时,会导致文件臃肿，所以可以把postcss的插件抽离出来。在根目录下新建一个postcss.config.js的配置文件，当在wepack.config.js中使用了postcss-loader,但是没有给其配置时就会找到此配置文件。

postcss-loader：