webpack4打包js

webpack可以将js、css等静态资源打包成一个文件，减少了请求，提高网页运行速度

• 创建一个文件夹webpackdemo，使用npm init -y 命令进行初始化，再使用npm install -g webpack webpack-cli命令进行webpack的安装

• 安装好后使用webpack -v命令进行测试，若输出版本号，则证明安装成功

• 创建src和dist文件夹，src下创建三个js文件

  common.js

  exports.info=function (str){

  document.write(str)

  }

  utils.js

  exports.add=function (a,b){

  return a+b

  }

  index.js，引入了前两个js，并进行调用

  const common = require(’./common’)

  const utils = require(’./utils’)

  common.info("hello common "+utils.add(1,2))

• src下再创建webpack.config.js配置文件，文件名固定，填充如下

  const path=require(“path”)//node.js内置模块

  module.exports={

  entry: ‘./src/index.js’,//入口文件

  output: {

  ​ path: path.resolve(__dirname,’./dist’),//输出路径，_dirname表示当前文件所在路径

  ​ filename: ‘main.js’//打包后的文件名

  }

  }

• 我的webpack版本是4，这个版本配置中的entry会默认指定src下的index.js，入口文件名需要为index.js，不能为其他名字，如main.js。不然会出错！查了好久最终在stack overflow上找到了答案,github上提交issues去问的人也非常多！注意！

• 直接使用webpack命令进行打包，也可以指定使用另一个命令webpack --mode=development指定mode，dist目录下会多一个js文件，里面是一长串已经打包好了的看不懂的东西

  (()=>{var o={648:(o,n)=>{n.info=function(o){document.write(o)}},555:(o,n)=>{n.add=function(o,n){return o+n}}},n={};function r(t){var e=n[t];if(void 0!==e)return e.exports;var i=n[t]={exports:{}};return ot,i.exports}(()=>{const o=r(648),n=r(555);o.info("hello common "+n.add(1,2))})()})();

• 开始进行测试，在文件夹webpackdemo下创建01.html，引入刚才打包好的js文件

  <script src="dist/main.js"></script>

• 运行html，在浏览器中查看，发现有输出，测试成功，输出内容如下

  hello common 3