如何使用webpack搭建项目

如何使用webpack搭建项目

一、什么是loader

单一原则，一个loader只做一件事

多个loader，从右到左，从下到上开始解析

二、使用到的loader

样式相关的loader

1、less-loader

自动将less转换为CSS

2、postcss-loader

一、什么是postcss

        postCSS和sass/less不同, 它不是CSS预处理器、postCSS是一款使用插件去转换CSS的工具。

二、使用到的插件

autoprefixer: 自动添加浏览器样式前缀

require("autoprefixer")({
    "overrideBrowserslist": [
        "ie >= 8", // 兼容IE7以上浏览器
        "Firefox >= 3.5", // 兼容火狐版本号大于3.5浏览器
        "chrome  >= 35", // 兼容谷歌版本号大于35浏览器,
        "opera >= 11.5", // 兼容欧朋版本号大于11.5浏览器
    ]
})

postcss-px2rem-exclude: 自动把px代为转换成rem

原插件为(postcss-px2rem 该插件支持排除文件)

require("postcss-px2rem-exclude")({
    remUnit: 100, // 注意算法，这是750设计稿，html的font-size按照750比例
    exclude: /node_modules/i,
})

3、css-loader

css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。

4、MiniCssExtractPlugin.loader

MiniCssExtractPlugin.loader mini-css-extract-plugin插件快速入门

作用：从css文件中提取css代码到单独的文件中，对css代码进行代码压缩等

配置：

{
    loader: MiniCssExtractPlugin.loader,
    options: {
        // 这里可以指定一个 publicPath
        // 默认使用 webpackOptions.output中的publicPath
        // publicPath的配置，和plugins中设置的filename和chunkFilename的名字有关
        // 如果打包后，background属性中的图片显示不出来，请检查publicPath的配置是否有误
        publicPath: './',
        // publicPath: devMode ? './' : '../',   // 根据不同环境指定不同的publicPath
        hmr: devMode, // 仅dev环境启用HMR功能
    }
}

5、style-loader

style-loader 的功能就一个，在 DOM 里插入一个