webpack学习相关

1， webpack的命令行工具叫做webpack-cli

2， 直接输入命令 ‘webpack’ 到终端 ，默认入口是./src/index.js ，默认的出口会打包为./dist/main.js;

3,   对webpack 命令 直接进行配置 

 

// --mode 就是当前的模式是哪一种 
// --mode 分为三种 1，development 开发包2，production生产包 3，none 不操作

 webpack --mode=development
 webpack --mode=production
 webpack --mode=none

/*
* ./src/hello.js 入口文件
* --output ./site/index.js  出口文件
*/ 

webpack --mode=development  ./src/hello.js --output  ./site/index.js

我们对命令 在package.json里的script 把这俩命令集成一下 

 "scripts": {
    "dev": " webpack --mode=development ",
    "build": " webpack --mode=production "
  },

其实就是运行了/bin/webpck.js 

至于是在全局/usr/local/bin/webpack ，还是当前局部的项目中 node_modules下的/bin看具体情况了，npx 工具可以先去执行 项目中 node_modules下的/bin , 这样就解决了webpack 跑本地全局安装webpack的兼容性问题

npm i -g npx 

4，对webpack 使用配置文件 进行配置

创建webpack.config.js

const path =require('path')

module.exports = {
  entry:'./src/index.js',  // 入口
  output:{   // 出口
    path: path.resolve(__dirname,'dist'),
    filename:'main.js'
  },
  mode:'production', // 模式
}

配置多入口文件

const path =require('path')

module.exports = {
 // entry:'./src/index.js',  // 入口
  entry:{   //多入口文件 ，value是一个对象
     main:'./src/index.js',
     ronn:'./src/ronn.js'
  },
  output:{   // 出口
    path: path.resolve(__dirname,'dist'),
   // filename:'main.js'
    filename:'[name].js' // 多入口文件，要改为[name] ，对应entry对象的key
  },
  mode:'production', // 模式
}

5，babel和webpack 结合 

安装 npm i --save @babel/core    // babel 核心

      npm i --save bable-loader  // 和webpack 来 结合使用的 

babel可以使用多种方式来编辑配置 https://www.babeljs.cn/docs/configuration；

1，babel.config.js

2，package.json

3, .babelrc/.babelrc.js 

4,webpack babel-loader中option来配置

我们使用两种方式来编辑 （ 3，4）

webpack babel-loader中option来配置

 module: {  // loader规则
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',  // 使用babal-loader
          options: {
           
            "plugins": ["@babel/plugin-transform-arrow-functions"],
          }
        }
      }
    ]
  }

.babelrc/.babelrc.js 

{
  "plugins": ["@babel/plugin-transform-arrow-functions"],
  
}

这样的话 还是针对 一些 单个插件的 ，不系统，

系统的话需要 使用 预设presets  分为了几个系列 

env : es 2015   

flow  检测你的js

react :react

typescript :ts

合理使用就好

//webpack babel-loader中option来配置

 module: {  // loader规则
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',  // 使用babal-loader
          options: {
            "presets": ["@babel/preset-env"],
            "plugins": ["@babel/plugin-transform-arrow-functions"],
          }
        }
      }
    ]
  }

//.babelrc/.babelrc.js 

{
  "plugins": ["@babel/plugin-transform-arrow-functions"],
  "presets": [["@babel/preset-env",{debug:true}]]
}

babel 可以转化一些语法，但是对于一些api是不能够转化的，这个时候就需要

@babel/polyfill 了， 用来转换 api的 和抹平浏览器差异的

使用 

需要在入口的顶部引入 import @babel/polyfill

如果useBuiltIns: 'entry'指定，.babelrc则@babel/polyfill通过require或import如上所述包含在应用程序入口点的顶部。

 options: {
            "presets": [["@babel/preset-env",{debug:true,useBuiltIns: 'entry'}]],
            "plugins": ["@babel/plugin-transform-arrow-functions"],
          }

useBuiltIns: 'usage' 可按需加载

原理是 在全局对象上挂载了 新增的api来实现功能的， 副作用是全局污染，以及 prototype 污染，可能会冲突。

@babel/plugin-transform-runtime 是用来解决这个问题的 ， 引入的沙盒机制 使得污染控制在沙盒内部。

使用 是 直接放到plugin里

module: {  // loader规则
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',  // 使用babal-loader
          options: {
            "presets": [["@babel/preset-env",{debug:true,useBuiltIns: 'entry'}]],
            "plugins": [["@babel/plugin-transform-arrow-functions"],
              ["@babel/plugin-transform-runtime",{
                "absoluteRuntime": false,
                "corejs": 2,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
              }]],
          }
        }
      }
    ]
  },

6 , webpack 插件机制，plugin 

const path =require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装

module.exports = {
 // entry:'./src/index.js',  // 入口
  entry:{   //多入口文件 ，value是一个对象
     main:'./src/index.js',
     ronn:'./src/ronn.js'
  },
  output:{   // 出口
    path: path.resolve(__dirname,'dist'),
   // filename:'main.js'
    filename:'[name].js' // 多入口文件，要改为[name] ，对应entry对象的key
  },
  module: {  // loader规则
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',  // 使用babal-loader
          options: {
            "presets": [["@babel/preset-env",{debug:true,useBuiltIns: 'entry'}]],
            "plugins": [["@babel/plugin-transform-arrow-functions"],
              ["@babel/plugin-transform-runtime",{
                "absoluteRuntime": false,
                "corejs": 2,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
              }]],
          }
        }
      }
    ]
  },
  mode:'production', // 模式
  plugins: [
    new HtmlWebpackPlugin({
      title:'webpack',
      chunks:['index'],
      template: './public/index.html',
      inject:'true',
      hash:true,
      minify: {
        removeAttributeQuotes: true // 移除属性的引号
      }
    })
  ]
}

7，css的处理 

module: {  // loader规则
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',  // 使用babal-loader
          options: {
            "presets": [["@babel/preset-env",{debug:true,useBuiltIns: 'entry'}]],
            "plugins": [["@babel/plugin-transform-arrow-functions"],
              ["@babel/plugin-transform-runtime",{
                "absoluteRuntime": false,
                "corejs": 2,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
              }]],
          }
        }
      },
      // css  postcss  抹平浏览器差异
      {
        test:   /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      },

      // less   postcss

      {
        test:   /\.less$/,
        loader: "style-loader!css-loader!postcss-loader!less-loader"
      }
    ]
  },

使用 postcss的时候需要在目录下新建postcss.config.js ,否则会 报Error: No PostCSS Config found in:

另外，style-loader 会导致  白屏 ，在生产环境 

const MiniCssExtractPlugin = require("mini-css-extract-plugin") 
 {
      　　  test: /\.css$/,
      　　  use: [
        　　  　　MiniCssExtractPlugin.loader,
        　　 　　 "css-loader"
       　　 ]
    　　  }

8， 安装完webpack-dev-server

 "scripts": {
    "dev": " webpack && webpack-dev-server --open --mode=development ",
    "build": " webpack --mode=production "
  },



  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,  // 压缩
    hot:true,  // 热加载
    inline:true, //热加载
    port: 9000   // 端口
    proxy： // 代理
  }

目前就支持 保存后自动打包更新了，但是需要注意的是 

contentBase: path.join(__dirname, 'dist'),  需要注意的是，如果配置文件配置了output的publicPath这个字段的值的话，在index.html文件里面也应做出调整。因为webpack-dev-server伺服的文件是相对publicPath这个路径的。而且，这个和output.path无关，因为文件存在内存中

9 ，使用file-loade,image-webpack-loader来处理图片

少于10k的 会直接被转化成 base64 ，{ test: /\.(png|jpg)$/, loader: "url?limit=0" }  ，使用url-loader来解决这个问题

10，merge 合并base+dev/pro  环境 来区分做的