webpack5的基础配置

npm init -y ==> 生成package.json文件
npm i typescript -g ==> 全局安装ts编译器 tsc

tsc -h ==> tsc 的帮助信息

tsc --init ==》 创建tsc的配置文件 tsconfig.json文件

新建src/index.ts ==》 原终端执行 tsc ./src/index.ts 编译命令 ==》 自动生成与index.ts同级的index.js 编译好的js文件
let hello: string = 'hello hi' ==> var hello = 'hello hi';

网址 https://www.typescriptlang.org/play ==》 左侧输入ts代码 右侧自动生成对应编译后的js

【以下webpack的配置】
配置常见webpack: => 只是一个工具
安装包：》 npm i webpack webpack-cli webpack-dev-server -D ==> 需要三个包 webpack webpack-cli webpack-dev-server
区分生成环境和开发环境 ==》 不同配置不同依赖 ==》 可以先分别各自配置 最后用插件合并配置

build文件里==》 webpack的配置
webpack.base.config.js ==》 公共基础配置
webpack.config.js ==》 入口
webpack.dev.config.js ==> 开发环境配置文件
webpack.pro.config.js ==> 生产环境配置文件

 entry: './src/index.ts', //指定入口文件
  output: {
    filename: 'app.js', //指定输出
  },
  resolve: {
    extensions: ['.js', '.ts', '.tsx'], //扩展名
  },

module: {
    rules: [
      {
        test: /\.tsx?$/i,
        use: [
          {
            loader: 'ts-loader', //需要安装对应的loader  再次安装typescript 本地-D
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },  
npm i ts-loader typescript -D    ==> //需要安装对应的loader  再次安装typescript 本地-D

const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
  new HtmlWebpackPlugin({
    //安装插件html-webpack-plugin   通过一个模板自动生成网站首页 并把输出文件自动嵌入到这个文件中
    template: './src/tpl/index.html',
  }),
],
npm i html-webpack-plugin -D   ==>  安装插件


创建src/tpl/index.html   ==> 模板文件   ==>  <div class="app"></div>

开发环境的配置 ===》 module.exports = {
                        devtool: 'cheap-module-eval-source-map', //开启source-map  开发环境
                      }
生成环境配置 ==》 const { CleanWebpackPlugin } = require('clean-webpack-plugin')

                  module.exports = {
                    //插件  自动清空dist目录
                    plugins: [new CleanWebpackPlugin()],
                  }

所有配置文件入口==》 插件  webpack-merge   ==》 把两个配置文件合并
                  // 引入插件webpack-merge   用来合并配置
                  const merge = require('webpack-merge')//现在不支持 报错 改为下面的引入方式
                  const { merge } = require('webpack-merge')
                  // 引入三个配置文件
                  const baseConfig = require('./webpack.base.config')
                  const devConfig = require('./webpack.dev.config')
                  const proConfig = require('./webpack.pro.config')

                  module.exports = (env, argv) => {
                    let config = argv.mode === 'development' ? devConfig : proConfig //定义config  确定下如果是是开发环境就用开发环境的配置  否则用生成环境的配置
                    return merge(baseConfig, config) //最后将baseConfig 和 config合并
                  }

                  // let config = process.NODE_ENV === 'development' ? devConfig : proConfig
                  // module.exports = merge(baseConfig, config)

【以下 修改npm 的脚本】
打开package.json文件 ==> 更改入口文件 "main": "index.js" ==》 "main": "./src/index.ts",
编写启动开发环境的命令 ==》 npm start
启动 需要 ==> webpack-dev-server
指定mode 参数 ==》 将当前的环境变量设置为development ==> --mode=development
指定配置文件 ==》 --config ./build/webpack.config.js

        "start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",

终端执行npm start命令   ===》  http://localhost:8080/    正常打开网页

【修改index.ts】 把字符串插入页面中
let hello: string = 'hello hi'
document.querySelectorAll('.app')[0].innerHTML = hello

【构建生产环境的脚本】
脚本名“build"
"build": "webpack --mode=production --config ./build/webpack.config.js",

  执行 npm run build   ==》 生成了dist目录   自动生成了模板index.html  构建好的app.js
                          且将构建好的app.js已经自动嵌入模板
                           <script defer="defer" src="app.js"></script>