webpack处理文件

一. 加载非js文件

1. webpack处理css,sass,less,scss模块
   webpack默认不能处理css文件，需要对应的loader将css文件解析。
   css->css-loader
styl-loader将解析了的文件转换成一个style标签，注入html文档中。
   安装对应loader
   npm i -D style-loader css-loader
npm i -D node-sass sass-loader
2. 添加css解析的loader

module: {
        rules: [ //不同模块的处理规则
            {   test: /\.(sc|c|sa)ss$/, 
                use: ['style-loader','css-loader','sass-loader']
                //test的模块用这些loader处理，从右到左处理
            }
        ]
    }

二. postcss处理loader

SourceMap

Source Maps能够提供将压缩文件恢复到源文件原始位置的映射代码的方式。
通过设置loader的options选项里面sourceMap属性为true来实现。

PostCss

PostCss是css预处理工具，可以给css3属性添加前缀，样式格式校验，css模块化（防止css样式冲突）。
npm i -D postcss-loader
npm i -D autoprefixer(添加前缀)

{
                        loader:'postcss-loader',
                        options:{
                            sourceMap:true,
                            plugins: [
                                require('autoprefixer')({
                                    browsers: [
                                        // 加这个后可以出现额外的兼容性前缀
                                        "> 0.01%"
                                    ]
                                })
                            ]
                        }
                    }

三. webpack的css提取成单独的文件

npm i -D mini-css-extract-plugin（webpack4.0版本）
npm i -D extract-text-webpack-plugin(webpack1~3)
抽取了样式，就不能再用 style-loader注入到 html 中了。

use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]//将原本的style-loader更改为该loader

const MiniCssExtractPlugin = require('mini-css-extract-plugin');//引入插件
plugins: [
    new MiniCssExtractPlugin({
      filename: devMode ? '[name].css' : '[name].[hash].css', // 设置最终输出的文件名
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css'
    })
  ]

四.压缩css

webpack5会内置 css的压缩，webpack4安装一个插件
npm i -D optimize-css-assets-webpack-plugin

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');//引入插件optimize-css-assets-webpack-plugin
 optimization: {
    minimizer: [new OptimizeCSSAssetsPlugin({})]
  }//在optimization中的minimizer属性中定义new该插件

顺便在提一下js的压缩//前提mode:production
npm i -D uglifyjs-webpack-plugin

new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true // set to true if you want JS source maps
      }),
//将以上代码填入到minimizer中

解决css,js文件hash值变化的问题

htmlwebpackplugin插件，把打包后的文件直接注入到html模板当中。
npm install --save-dev html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({
      title: 'AICODER 全栈线下实习', // 默认值：Webpack App
      filename: 'main.html', // 默认值： 'index.html'//导出时dist中的文件名
      template: path.resolve(__dirname, 'src/index.html'),//css,js文件注入的模板文件
      minify: {
        collapseWhitespace: true,
        removeComments: true,//移除注释
        removeAttributeQuotes: true // 移除属性的引号
      }
    })

清理dist目录

每次运行都会生成新的文件加入dist目录，使得目录很混乱，此时需要每次运行构建前清理dist目录。
npm install clean-webpack-plugin --save-dev

 const CleanWebpackPlugin = require('clean-webpack-plugin');
 pulign[new CleanWebpackPlugin(['dist'])]//定义插件并指定清理的目录

注：当你运行插件的时候有没有遇到这种问题

image.png
这是由于不识别es6的语法所以会报错，
安装插件babel-preset-es2015（默认你已经安装了babel-loader、babel-core）