跳至主要內容

基础用法

zfh大约 1 分钟约 377 字...

npm i webpack webpack-cli -D

entryopen in new window 项目入口

outputopen in new window构建产物输出

loader各类资源处理

如果配置了多个`loader`,按照从右到左的顺序执行

    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader',],
        }]
    }



 


处理样式资源

CSS

虽然使用 css-loader 可以将 CSS 文件转换为 JavaScript 模块,但是这仅仅是将 CSS 代码打包进 JavaScript 文件中,并没有将样式应用到页面上。因此,还需要使用 style-loaderCSS 代码动态地插入到HTML页面的 <style> 标签中,从而实现将样式应用到页面上的功能

SCSS

 {
  test: /\.scss$/,
   use: ['style-loader', 'css-loader', 'sass-loader']
  }

使用MiniCssExtractPlugin.loader会将 CSS 提取到单独的文件中,注意的是它和style-loader冲突

Plugin功能扩展

提示

Loader主要是用于处理模块的转换,Plugin则是用于扩展Webpack的功能。在Webpack的打包过程中,LoaderPlugin是密不可分的两个部分,Loader用于将不同类型的文件转换为Webpack可处理的模块,Plugin则用于在打包过程中执行自定义的任务和操作

HtmlWebpackPluginopen in new window 创建html

MiniCssExtractPluginopen in new window 提取css

CssMinimizerWebpackPluginopen in new window 压缩css

需要在 optimization.minimizer配置

    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
        ],
    },

mode 构建模式

上次编辑于:
本站勉强运行 小时
本站总访问量
網站計數器