webpack使用

一、js文件的打包

1、现在的js文件中使用了模块化的方式进行开发，他们不可以直接使用

• 因为如果直接在index.html中引入这两个js文件，浏览器并不识别其中的模块化代码
• 另外，在真实项目中有很多这样的js文件，这样一个个引用的话在后期不方便对他们进行管理

2、使用webpack工具，对多个js文件进行打包

• webpack就是一个大包工具，他支持我们代码中写模块化，可以对模块化的代码进行处理
• 另外，如果在处理完所有模块之间的关系后，将多个js打包到一个js文件中，引入时就变得很方便了

在控制台输入webpack指令：

webpack src/main.js dist/bundle.js

意思是将src下的main.js文件打包到dist中的bundle.js中，这样在导入的时候就可以只导入bundle.js即可。

二、webpack的配置

webpack.config.js

const path = require('path')

module.exports = {
   
    //入口
    entry:'./src/main.js',
    //出口
    output:{
   
        path:path.resolve(__dirname,'dist'),    //这里要写绝对路径，要动态获取路径
        filename:'bundle.js'
    }
}

然后直接在命令行里输入 webpack 就可以打包了。

如果要将 webpack和 npm run build 联系起来，那么要写package.json文件中写入映射：

{
   
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
     //脚本
    "test": "echo \"Error: no test specified\" && exit 1",
    //在这里写入映射
    "build": "webpack"
  },
  "author": ""