React随想录---webpack---第二树

React随想录—webpack

1. 简介

   • 为前端的自动化工具之一 目前使用最广泛
   • 用于 前端项目的搭建 对静态资源的打包压缩，用于上线
   • 网址链接 https://www.webpackjs.com/
   • 支持CMD和AMD，同时拥有丰富的plugin（插件）和loader（转化器）
   • 作用：把一文件类型转化为其它文件类型 同时自动转化拥有依赖关系的文件

2. 安装及使用

• 安装 $ npm install webpack webpack-cli -g （先全局安装再局部安装一次）

• 初始化一次得到package.json文件 $ npm init

• 在package.json文件中配置命令

  "scripts": {/* 脚本运行的配置 */
      "dev": " npm start & webpack-dev-server --config config/webpack-dev.js",
      "start": "webpack --config config/webpack-dev.js",/*--config后面指向的是配置文件的路径*/
      "build": "webpack --mode production --config config/webpack-prod.js",
      "test": "echo \"Error: no test specified\" && exit 1"
    },
  

3. 配置文件的搭建

   • 模块的搭建

   • ```
     module.exports = {
     entry: ‘./src/index.js’, //入口文件 需要打包的文件 应该用磁盘路径
     output: { //出口目录、文件的配置
     path: path.join( __dirname,‘dist’), // 放置打包后文件的地址的根目录
     filename: ‘js/app.js’ // 入口文件将来打包到出口目录中的文件的路径和名称
     },
     mode: ‘development’//确定是生产环境还是开发环境的打包 这里配置了 package.json就不用配置了
     }
     //文件名可以自己定义

     //静态服务器的搭建
     devServer: {//和module同级
     port: 8088,
     open:true
     }

   • 模块的配置

     • 优雅降级配置

       1. $ npm install babel-loader@8.0.4 @babel/core @babel/preset-env -D

       2.  {// 配置优雅降级
                         test: /\.js$/,
                         exclude: /node_modules/, // 排除node_models中的js文件
                         use: [{
                           loader: 'babel-loader',
                           options: {
                             presets: ['@babel/preset-env']
                           }
                         }
              module模块中的配置（转化器loader）
          

     • css 的转换

       1. $npm i style-loader css-loader -D

       2.  module: { //这里用来存放转换器的配置
              rules: [
                // {} //每一个对象就是一个转换器的配置
                {//css的处理
                  test: /\.css$/, // 整个项目下匹配 .css结尾的文件
                  use: ['style-loader','css-loader'] //两个顺序是不写反的
                  // 我们需要使用css-loader将css文件编译为js,然后通过style-loader将js处理插入到html文件中【 style 嵌入模式 】
                }
              ]
            },
          

     • html产出 - 依赖的是插件

       1. $ npm i html-webpack-plugin -D

       2. const HtmlWebpackPlugin = require(‘html-webpack-plugin’)//插件需要先引入再使用

       3.  plugins:[
                      new HtmlWebpackPlugin({
                          template: './public/index.html',
                          filename: './index.html',//默认到output目录
                          hash:true,//防止缓存,会给文件后面加入hash
                          minify:{
                              removeAttributeQuotes:true//压缩 去掉引号
                          }
                      })
              ]
          

     • css抽离 - 依赖的是插件

       1. $ cnpm i extract-text-webpack-plugin@next -D

       2. ​ const ExtractTextWebapckPlugin= require(“extract-text-webpack-plugin”)

       3.  use: ExtractTextWebapckPlugin.extract({
                    use: 'css-loader'
                  }) //不再需要style-loader
          
              //pulgin配置
              new ExtractTextWebapckPlugin('css/[name][hash:6].css')
          

     • 图片打包 转换器

       1. $ npm i url-loader file-loader --save-dev

       2.  {
                  test:/\.(png|jpg|gif)/,
                  use:[{
                    loader: 'url-loader',
                    options: {
                      limit: 5000,//字节少于5000 ——》 base64  超过5000  file
                      outputPath: 'images/', //5000意思存到images
                    }
                  }]
                }
          

     • 静态资源拷贝

       1. ​ npm i copy-webpack-plugin -D

       2.  const CopyWebpackPlugin = require('copy-webpack-plugin')//引入
          //plugin配置
              new CopyWebpackPlugin([
                { from: path.resolve(__dirname,'static'), to: 				       path.resolve(__dirname,'build/static') }
              ])
          

     • 错误资源定制

       // 在webpack.config.js中添加如下配置项：
       devtool: 'source-map'  
       制定报错信息的源
       

     • 其它配置 在中文网中查找对应的转换器或者插件 有对应的代码教程

4. 2