webpack配置

一、安装依赖

npm install webpack webpack-cli ts-loader -D

二、 配置

const path = require('path')

module.exports = {
    entry:'./src/index.ts',  // 
    output:{
        path:path.resolve(__dirname,'dist'),
        fileName:'bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.ts$/,
                use:'ts-loader',
                exclude:/node-modules/
            }
        ]
    }
}

二、 html-webpack-plugin 动态创建html

npm install html-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
      new  HtmlWebpackPlugin({
        title:'这是自定义标题'
      })
    ]

二、 webpack-dev-server 开启服务

cnpm install webpack-dev-server -D

package.json
 "scripts": {
    "dev":"webpack server --open chrome.exe"
  },

三、 clean-webpack-plugin 清除dist目录

cnpm install clean-webpack-plugin -D

webpack.config.js
const {cleanWebpackPlugin}  = require('clean-webpack-plugin')
  plugins:[
      new cleanWebpackPlugin()
    ]

三、 resolve用来设置引用模块

在文件中通过import 或者export 导出、导入文件报错，配置下面的选项
webpack.config.js
 resolve:{
        extensions:['.ts','.js']
    }

四、配置babel（兼容性）

cnpm install -D @babel/core @babel/preset-env babel-loader core-js
module:{
        rules:[
            {
                test:/\.ts$/,
                use:[
                    {
                        // 指定加载器
                        loader:'babel-loader',
                        //设置babel
                        options:{
                            presets:[
                                [
                                    // 指定环境的插件
                                    "@babel/preset-env",
                                    {
                                        // 要兼容的目标浏览器
                                        targets:{
                                            "chrome":58,
                                            "ie":11
                                        },
                                        // 指定corejs的版本
                                        "corejs":3,
                                        // 使用corejs的方式usage，表示按需加载
                                        "useBuiltIns":"usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader',
                ],
                exclude:/node-modules/
            }
        ]
    },

const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin}  = require('clean-webpack-plugin')
const path = require('path')

module.exports = {
    mode:'development',
    entry:'./src/index.ts',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js',
        environment:{
            arrowFunction:false // webpack 打包默认使用箭头函数，要不想使用，就直接false,否则生成的箭头函数，在ie不兼容会报错
        }
    },
    module:{
        rules:[
            {
                test:/\.ts$/,
                use:[
                    {
                        // 指定加载器
                        loader:'babel-loader',
                        //设置babel
                        options:{
                            presets:[
                                [
                                    // 指定环境的插件
                                    "@babel/preset-env",
                                    {
                                        // 要兼容的目标浏览器
                                        targets:{
                                            "chrome":58,
                                            "ie":11
                                        },
                                        // 指定corejs的版本
                                        "corejs":3,
                                        // 使用corejs的方式usage，表示按需加载
                                        "useBuiltIns":"usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader',
                ],
                exclude:/node-modules/
            }
        ]
    },
    plugins:[
      new  HtmlWebpackPlugin({
        // title:'这是自定义标题'
        template:'./src/index.html'
      }),
      new CleanWebpackPlugin()
    ],
    // 用来设置引用模块
    resolve:{
        extensions:['.ts','.js']
    }
}