webpack（续）

学无止境，望君把握时间

优雅降级：

优雅降级：先进行高版本的开发，然后向下兼容。
渐进增强： 先进行低版本的开发， 然后添加高本版内容。

完成实例：
modules : {
  rules : [
       {
         test : /\.js$/,
         //排除node_modules文件夹
         exclude : /node_modules/,
         use : [{
            loader : 'babel-loader',
            options : {
                  presets : ['@babel/presets-env']
            }
         }]      
       }
  ]
}

2.css代码抽离（重点）:

功能：
将src目录中css文件打包到dist目录中，并且会自动在index.html中引入link。
步骤：

1.先安装：
cnpm i extract-text-webpack-plugin -D
2.在webpack.config.js中引入
var ExtractTextWebpackPlugin = new require('extract-text-webpack-plugin')
3.在css的loader转换器中进行使用。

//css解析：
module : {
  rules : [
    {
      test : /\.css$/,
      use : ExtractTextWebpackPlugin.extract({
          use : 'css-loader'
      })
    } 
  ]
},
//插件：
plugins : [
  new ExtractTextWebpackPlugin('css/[name]_[hash:8].css')
]

3.图片打包（重点）：

解释：
base64 将数据量较小的图片（4K以下）转成 字符编码

作用：
它可以减少http请求， 从而加快页面加载速度

modules :{
   rules : [
      {
         test : /\.(png|jpg|gif|svg)/,
         use : [
            {
               loader : 'url-loader',
               options : {
                    limit : 5000,
                    outputPath : 'img/'
               }
            }
         ]
      }
   ]
}

4.静态资源拷贝：

步骤：
1.安装插件：
cnpm i copy-webpack-plugin --save-dev
2.在webpack.config.js文件中引入插件：
const copyWebpackPlugin = require('copy-webpack-plugin');
3.在plugins中配置插件;
var copyWebpackPlugin([{
   from:__dirname+'/src/public',//打包的静态资源的目录地址。
   to::'/public' //打包到dist下的public文件中。
}])
4.在终端中输入webpack进行调试，完成打包

5.配置文件抽离：

步骤：
1.创建一个config文件夹目录，然后在里面新建两个webpack配置文件
 ----webpack.config.dev.js
 ----webpack.config.prod.js
2.修改package.json中的npm脚本命令
操作如下：
"dev": "webpack --mode development --config config/webpack.config.dev.js",
 
 "build": "webpack --mode production --config config/webpack.config.prod.js",
 
  "server": "webpack-dev-server --mode development --config config/webpack.
  config.dev.js"
3.修改配置文件中的路径：
将相对路径修改为磁盘路径。

6.错误资源定制：

作用：
能够精准的找到错误的源代码的位置。

devtool: 'source-map'