Webpack打包简教程

一、在本地安装webpack

安装的前提是安装了Node.js，使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。
对于大多数项目，我们建议本地安装。

npm i --save-dev webpack
npm i --save-dev webpack@<version>

不推荐全局安装，因为会将webpack锁定到指定版本，在使用不同版本的项目中，可能会导致构建失败。

es6的import和export已经标准化，但大多数浏览器还部支持，但webpack却能够提供开箱即用般的支持。

二、创建配置文件

在项目根目录下创建webpack.config.js配置文件:

const path = require('path');

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

比起 CLI 这种简单直接的使用方式，配置文件具有更多的灵活性。配置文档

三、NPM 脚本

在项目的package.json里加入如下代码：

"scripts": {
    "build": "webpack" 
  },

注意，使用npm的scripts，我们可以通过模块名引用本地安装的npm包

四、执行打包

在cmd里切到项目目录，运行：

npm run build

运行成功后如图：

如果不使用npm脚本，可以直接运行./node_modules/.bin/webpack进行打包，不过在windows里可能会遇到以下问题：

解决方法是为/换个方向：

如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它。这里使用--config只是表明，可以传递任何名称的配置文件，这对需要拆分成多个文件的复杂配置非常有用。