简单的webpack打包案例

1、新建一个mathUtils.js文件,这里使用CommonJs的方式导出方法,代码如下:

 2、新建一个info.js文件,这里使用ES6的方式导出参数和方法,代码如下:

 3、新建一个main.js文件,分别导入mathUtils.js和info.js里面的参数和方法

4、新建一个webpack.config.js文件,代码如下:

const path = require('path')
module.exports = {
  entry: path.join(__dirname, './src/main.js'),// 入口,表示,要使用 webpack 打包哪个文件
  output: { // 输出文件相关的配置
    path: path.join(__dirname, './dist'), // 指定 打包好的文件,输出到哪个目录中去
    filename: 'bundle.js' // 这是指定 输出的文件的名称
  },
  mode: 'development'
}

5、执行webpack打包语句

 6、在dist文件夹中新生成一个打包后的文件

 7、在index.html文件中因为这个打包后的js文件

 8、运行查看效果

 

posted @ 2021-04-08 15:47  岁月淡忘了谁  阅读(145)  评论(0编辑  收藏  举报