webpack练手简易配置

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

webpack.config.js, 否则直接输入 npx webpack 打包会出错 //webpack中的所有配置信息都应该写在modeul.exports中 如果要使用其它名称, 那么在输入打包命令时候必须通过 --config 指定配置文件的名称 格式如下所示npx webpack --config ./xxx.js

//cnpm i -D webpack-dev-server 安装插件开启webpack服务器 在package里面添加命令"start": "webpack server --open" 就可以npm start开启webpack服务了实时更新编译ts代码

module.exports={

//指定入口文件

entry:'./src/index.ts',

//指定打包文件所在目录
output:{
  //指定打包文件所在目录 path.resolve(__dirname,'dist')拼路径
  path:path.resolve(__dirname,'dist'),
  //打包后文件的文件
  filename:'bundle.js',
  //告诉webpack不使用箭头函数
  environment:{
    arrowFunction:false
  }
},
//指定webpack打包是要使用的模块
module:{
  //指定要加载的规则
  rules:[
    {
      //test指定的是规则生效的文件,/\.ts$/正则匹配所有以ts结尾的文件
      test:/\.ts$/,
      //要使用的loader,用ts-loader去处理所有以ts结尾的文件
      use:[
        {
          //指定加载器
          loader:'babel-loader',
          //设置babel
          options:{
            //设置预定义的环境
            presets:[
              [
                 //指定环境的插件
              "@babel/preset-env",
               //配置信息
               {
                //要兼容的目标浏览器
                //小写浏览器加版本号
                targets:{
                  "chrome":"58",
                  "ie":"5",
                  "firefox":"38"
                },
                //指定corejs的版本
                "corejs":"3",
                //使用corejs的方式"usage",表示按需加载，需要哪些就会自己加载哪些
                "useBuiltIns":"usage"
              }
              ],                 
            ]
          }
      },
      'ts-loader'
    ],
      //要排除的文件
      exclude:/node_modules/
    },
    {
      //test指定的是规则生效的文件,/\.ts$/正则匹配所有以ts结尾的文件
      test:/\.html$/,
      //要使用的loader,用ts-loader去处理所有以ts结尾的文件
      use:'html-loader',
      //要排除的文件
      exclude:/node_modules/
    }
  ],
},

mode : 'production',
plugins:[
  new CleanWebpackPlugin(), //每次删除旧文件再编译
  new HTMLWebpackPlugin({
    // title:'标题'    生成的htmltitle配置
    template:'./src/index.html' //使用自己的html当生成的模板
  }),
],
//用来设置引用模块,必须配
resolve:{
  extensions:['.ts','.js'] // 设置以ts或者js结尾的文件可以作为模块使用，导入导出
}

}