webpack笔记汇总

1-1安装：
    npm init -y
    npm install webpack webpack-cli --save
1-2 通过命令行来切换dev || product 环境,解决通过注释来切换环境
    npm install --save-dev cross-env
    可在package.json中配置：
    "scripts": {
        "dev": "cross-env NODE_ENV=development webpack",
        "build": "cross-env NODE_ENV=production webpack"
      },
      webpack.config.js中配置：(
        mode:process.env.NODE_ENV,
      )
      npm run dev后，全局变量process.env.NODE_ENV为development
      npm run build后，全局变量process.env.NODE_ENV为production
1-3 webpack-dev-server(路径重定向、接口代理、热更新、浏览器显示编译错误)
    npm install webpack-dev-server
    "scripts": {
        "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --inline --port 3000 --content-base ./dist/",
        "build": "cross-env NODE_ENV=production webpack"
      },
      或在webpack.config.js 中增加devServer字段,如：
      devServer:{
        port:3000,
        hot:true,
        hotOnly:true,
        inline:true,
        overlay:true (错误遮罩),
        historyApiFallback:true,(路由找不到，页面保持不动)，
        historyApiFallback：{
            rewrites:[
                {
                 from:/^\/([ -~]+)/,
                 to:function(context){
                    return './'+context.match[1] + '.html'
                 }
                }
            ]
        },(配置重定向),
        proxy:{  //代理转发，匹配/api就转发，转发时将/api替换成/,headers转发携带请求头
          '/api':{
            target:'https://www.baidu.com',
            changeOrigin:true,
            pathRewrite:{
                '^/api':'/'
            },
            headers:{

            }
          },
          '/baidu':{
            ...
          }
        }
      }
      注：webpack-dev-server --hot --inline --port 3000 开启3000端口热更新
       --content-base ./dist/ 打包后自动监听dist目录下的index.html文件
      webpack.config.js,通过--config命令可以修改为另一个配置文件。例如：webpack-dev-server --hot --inline --config webpack.es6.config.js
1-4 source-map (追踪定位到原始文件错误，否则直接报错文件都在bundle.js,不利于排查)
    开发模式：devtool:"cheap-module-source-map"
    生产模式：devtool:"source-map"
2-1解析es6语法
npm install babel-loader @babel/core --save-dev
npm install @babel/preset-env --save-dev
rules:[
    {
     test:/\.js$/,
     use:{
            loader:'babel-loader',
            options:{
                presets:[
                    ['@babel/preset-env',{targets:{browsers:['>1%']}}]
                ]
            }
         }
     }
 ]
 可新建.badelrc文件，放入
 presets:[
      [
          '@babel/preset-env',{
              targets:{
                browsers:['>1%']
              }
          }
      ]
  ]
 2-2.es6方法编译
  npm install babel-polyfill --save-dev
  npm install @babel/plugin-transform-runtime @babel/runtime --save
  babel-polyfill(生成全局对象方法)使用方式，在js文件头部引入import 'babel-polyfill' || entry:['babel-polyfill','app.js']
  babel-transform-runtime (生成局部对象方法)使用：.babelrc文件新增：
  "plugins"：[
    [
        '@babel/transform-runtime'
    ]
  ]
  3.Typescript
  npm install typescript ts-loader --save-dev
  rules:[
    {
        test:/\.tsx?$/,
        use:'ts-loader'
    }
  ]
  创建tsconfig.json文件:
  {
    "compilerOptions":{
        "module":"commonjs",
        "target":"es5"
    },
    "exclude":["./node_modules"]
  }
  4-1.css编译处理
  css-loader:可以是使用js import引入
  style-loader:将css以style标签插入页面
  npm install style-loader css-loader --save
   rules:[
    {
        test:'/\.css$/',
        use:[
            {
                loader:'style-loader',
                 options:{
                        insertAt:'top',顶部
                        insertInto:'#id',插入到id标签下
                        singleton:true 合并到一个style标签
                     }
            },
            {
                loader:'css-loader',
                options:{
                        module:true
                     }
            }
        ]
    }
   ]
     less编译loader：
     npm install less less-loader --save
     rules:[
        {
             test:'/\.less$/',
              use:[
                 {
                      loader:'style-loader'
                  },
                  {
                     loader:'css-loader'
                   },
                   {
                    loader:'less-loader'
                   }
                ]
            }
     ]
   sass编译loader：
   npm install sass-loader node-sass --save
4-2.css提取为单独的文件
    npm install extract-text-webpack-plugin@next webpack --save(extract-text-webpack-plugin@next基于局部webapck)
    webpack.confing.js文件:(
        const extractTextCss = require("extract-text-webpack-plugin");
        module:{
            rules:[
                {
                    test:/\.less$/,
                    use:extractTextCss.extract({
                        fallback:{
                            loader:'style-loader',
                            options:{
                                ...
                            }
                        },
                        use:[
                            {
                                loader:'css-loader',
                            },
                            {
                                loader:'less-loader'
                            }
                        ]
                    })
                }
            ]
        },
        plugins:[
            new extractTextCss({
                filename:'[name].min.css'
            })
        ]
    )
 4-3.css兼容性
    npm install postcss postcss-loader autoprefixer postcss-cssnext --save
    use:[
       {
         loader:'css-loader',
        },
        {
           loader:'postcss-loader',
           options:{
            ident:'postcss',
            plugins:[
                require('autoprefixer')({
                    "overrideBrowserslist":[
                        ">1%","last 2 versions"
                    ]
                }),
                require('postcss-cssnext')()
            ]
           }
        },
        {
           loader:'less-loader'
         }
     ]
5生成HTML
    npm install html-webpack-plugin --save -dev
    filename:打包生成后的html文件的名字
    template:指定一个html文件为模板
    minify:压缩html
    inject：是否把js、css文件插入到html，插入到哪
    chunks：多入口时，指定引入chunks
    webpack.config.js:(
        const htmlWebpackPlugin = require('html-webpack-plugin');
        plugins:[
            new htmlWebpackPlugin({
                filename:'index.html',
                template:'./index.html',
                minify:{
                    collapseWhitespace:true
                },
                inject:true,
                chunks:['app'] 只引入app.js入口文件
            })
        ]
    )
6.webpack环境配置
    开发模式:额外用到一些调试功能，比如webpack-dev-server,为了加快调试，不用压缩，tree-shaking
    生产模式:减少体积，用tree-shaking，不用webpack-dev-server、eslint功能
    功能：
        production:去除无用代码、图片压缩、转码base64，雪碧图、提取公用代码
        development：webpack-dev-server、source-map、代码风格检查
    webpack3 : (
        环境使用：(
            webpack --env envname
            修改webpack.config.js模块导出结构：
             module.exports=env=>{ //env为环境名
                const config = {
                      entry,
                      output,
                      ...
                 }
                 return config;
             }
        )
        环境编写：
            创建webpack.dev.js放入dev模式配置选项
            创建webpack.product.js 放入product模式配置选项
            在webpack.config.js 中判断环境，然后选择dev | product合并
            合并 : webpack-merage
            const merage = require("webpack-merage");
            const product = require("./webpack.product.js");
            const dev = require("./webpack.dev.js");
             module.exports=env=>{ //env为环境名
               const config = {
                  entry,
                  output,
                   ...
                }
               return merage(config,env === "production"? product:dev);
             }
    )
    webpack4:(
       打包：webpack --mode evname
       注：process.env.NODE_ENV 未赋值
    )
7.原理解析:
    依赖node环境,node读取文件，处理后写出文件
    读取配置文件=》注册内部插件与配置文件=》loader编译=》组织模块=》生成最终文件
     loader原理：(
        一个方法接收字符串，处理返回字符串

     )
8.代码分割
    提取公共依赖：(

    )
    减少文件体积，拆分应用：(
        optimization:{
            splitChunks:{
                name:true
                chunks:"initial" ,// all 所有同步代码提取 initial 同步和异步都提取 async异步代码提取
                minSize:0,
                automaticNameDelimiter:".",
                cacheGroups:{
                    vender:{
                        test:/[\\/]node_modules[\\/]/,
                        name:"vender",
                        priority:-10
                    }
                },
            },
            runtimeChunk:{
                name:"runtime"
            }
        },
        plugins:[
            new htmlWebpackPlugin(
                {
                    filename:'index.html',
                    template:"index.html",
                    chunks:['app','runtime','common','vender']
                }
            )
        ]
    )
    异步文件提取懒加载：(
        import(/*webpackChunkName:'rename'*/"name.js").then(res=>{
        });
        require.ensure(['jquery'],function(){

        })
    )
    打包方式：(
        多页面应用：业务代码+公共依赖+第三方包+webpack运行代码
        单页面应用：业务代码+异步模块+第三方包+webpack运行代码
    )

9.清除上次打包文件
    const {CleanWebpackPlugin} = require('clean-webpack-plugin');
    plugins:[
        new CleanWebpackPlugin()
    ]