w1020/22.webpack/归纳.md

1.安装yarn

npm install yarn -g

2.初始化文件

yarn init -y

3.安装webpack

yarn add webpack webpack-cli -D

4.创建src文件夹 创建index.js文件

5.演出加载

defer

6.webpack配置

webpack.config.js

7.入口文件

确认打包路径

entry:"./src/a.js"

entry: ['./src/a.js','./src/index.js']

entry: {hi:'./src/a.js',hello:'./src/index.js'}

8.环境

mode: development 开发 production 生产

9.出口文件 output

filename 文件名字 path 指定打包文件夹名字(使用时候需引入path路径) clean 清除打包文件夹中其余的文件

10.打包命令：yarn webpack

11.loader插件

module配置 {

配置所有规则数组
rules:[
    {
      test 属性，识别出哪些文件会被转换。
      use 属性，定义出在进行转换时，应该使用哪个 loader。
    }
]

}

12.babel

npm install -D babel-loader @babel/core @babel/preset-env webpack {

  test: /\.m?js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env'],
    },
  },
},

13.browserslist

匹配可兼容浏览器

14.plugin

自动生成html页面 并连接 安装： yarn add -D html-webpack-plugin const HtmlWebpackPlugin = require('html-webpack-plugin'); plugins: [

    new HtmlWebpackPlugin({
        template:'./src/index.html'
    })
]

15.开发服务器

yarn add -D webpack-dev-server 命令： yarn webpack serve 自动打包 服务器 yarn webpack serve --open

16.映射远码

devtool:'inlin-source-map'