webpack之打包项目

一：webpack打包命令：

意义：从：./src/main.js入口文件打包至./dist/bundle.js文件中。

webpack ./src/main.js ./dist/bundle.js

二：webpack.config.js

在项目根目录下新建webpack.config.js文件，然后在其中写入：

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

这时，我们就可以直接使用：webpack命令来打包了！

其中，entry代表入口文件，output代表打包后生成的文件！

三：npm run build

在后续的项目开发中，我们需要配置很多东西，所以，我们在这时，就可以使用：npm run build命令来帮我们进行打包。

步骤：

1：执行

npm init

然后按照提示依次输入配置信息。

2：修改

在自动生成的package.json文件中，在script标签中添加：

"build": "webpack"

即可！

这时我们就可以使用

npm run build

来打包我们的项目了！

PS：npm run build 本质上也是使用webpack命令。只不过在这儿使用该命令替换了而已！

四：单独使用npm某一版本，并且不会影响项目的上线

在该项目中使用：

npm install [email protected] --save-dev

这种方式安装webpack，那么，我们的webpack就可以单独使用该版本的webpack去打包了，并且不会在生成项目时出现。

注意：这种方式只能使用npm run build的方法来打包，因为webpack命令会直接使用全局的webpack！而使用npm run build命令会优先在我们的项目中去找webpack使用！

---

END