webpack进行基本的打包配置

一、建目录 dist src/main.js

• 1. 新建一个文件夹名为 【webapck】 , 在 webpack 中新建 【dist】 文件夹 和 【src】 文件夹，如下图所示：

     
     image.png

二、初始化

• 1. 在终端输入【npm init -y】

npm init -y

• 2. 发现执行了【npm init -y】，多一个【package.json】文件

     
     image.png

三、安装信赖包（-D）将信赖记录成开发信赖，只是开发中需要用的信赖，实际上线不需要的。

npm add webpack -D
npm add webpack-cli -D

发现多了一个node_modules文件。

image.png

四、 在【package.json】文件中添加一行 【script脚本】，让webpack打包的时候能找到命令

// webpack.config.js文件名最好不要更改，就默认用webpackp定义好的这样文件名
"script": {
   "build": "webpack --config webpack.config.js"
  },

image.png

五、新建webpack.config.js文件

• 1. 新建一个webpack.config.js文件，如下所示

     
     image.png
• 2. 配置webpack.config.js文件

// 引入path模块
const path = require('path');

// 配置webpack的配置文件，需要将配置的对象导出，给webpack使用
module.exports = {
    // 1. 打包入口，从哪个文件开始打包
    entry: './src/main.js',
    // 2. 打包的文件放在哪
    output:{
        // 打包的文件输出的目录（输出的目录必须是一个绝对路径），这里也可以写成path:path.join(_dirname, 'dist')
        path: path.join(__dirname, './dist'),
        // 打包后的文件名叫什么
        filename: 'bundle.js'
    },
    // 3. 打包的模式： production 生产模式（打包后的文件或压缩） development(开发模式，不压缩)
    mode: 'development'
}

六、在main.js中写入内容

console.log('这是一个main.js')
console.log('我是gg')

七、执行配置的package.js中的script脚本

npm run build

八、打包后打开【bundle.js】,发现main.js 中的内容已经被打包出来了。

image.png

九、我们再新建一个index.js，和main.js同级，里面输入内容，再进行打包

• 1. index.js内容如下

     
     image.png
• 2. main.js中引入index.js. 因为 main.js是打包文件入口，所以需要把打包的文件都引用到main.js中

var index = require('./index');

console.log('这是一个main.js')
console.log('我是gg')

image.png

• 3. 执行打包script脚本

npm run build

• 4. 打开bundle.js,发现index.js和main.js两个文件都被打包在一个文件里了。

     
     image.png