VIP32/webpack/命令.md

1.安装yarn

npm install yarn -g

2.初始化文件

yarn init -y

3.安装webpack

yarn add -D webpack webpack-cli

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

5.延迟加载

defer

6.webpack配置

webpack.config.js

7.entry 入口文件

确认打包的文件路径

a. entry:'./src/a2.js'

b. entry:['./src/a2.js','./src/a3.js']

c. entry:{

    hi:'./src/a2.js',
    hello:'./src/a3.js'
}

8.output 输出文件

filename 文件名字 clean 清除打包文件中其余的文件 path 打包文件夹输出

9.模式

生产模式 production 开发模式 development

10.loader插件

帮助用户在js页面引入样式 图片... 使用module配置 {

test:"匹配内容",
use:"匹配内容所用到的插件"

} yarn add -D xxx-loader npm install -D xxx-loader

11.babel

yarn add -D babel-loader @babel/core @babel/preset-env 配置：

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

兼容

"browserslist":[

"defaults"，
可兼容的浏览器....

]

12.plugin插件

yarn add -D html-webpack-plugin const HtmlWebpack = require("html-webpack-plugin")

new HtmlWebpack({
    title:"哈哈哈哈",
    template:"./src/index.html"
})

生成html页面 并自动连接

13.开发服务器

yarn add -D webpack-dev-server 启动：yarn webpack serve 开启开发服务器 yarn webpack serve --open 自动打包

14.映射源码

devtool:"inline-source-map"