npm 包 autopack 使用教程

在前端开发中，使用 webpack 进行模块打包已经是司空见惯的操作。但是如果每次手动提交代码前都要执行一次 webpack，岂不是很麻烦？autopack 这个 npm 包就是为了解决这个问题而生的。

安装

安装 autopack 很简单，只需要在命令行中输入以下命令即可：

npm install autopack --save-dev

使用

1. 在项目的根目录下创建一个 autopack.config.js 文件。

2. 然后在该文件中编写 autopack 的配置信息，比如：

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

1. 在 package.json 文件中添加一个 scripts 部分:

{
  "scripts": {
    "autopack": "autopack"
  }
}

1. 使用 npm run autopack 命令运行 autopack。

npm run autopack

之后，autopack 会自动读取 autopack.config.js 文件中的配置信息，并自动执行 webpack 打包的操作。

配置参数

autopack 的 autopack.config.js 文件支持以下的配置参数：

entry

入口文件路径。

output

输出文件的配置，包括路径和文件名。

output: {
  path: 'dist',
  filename: 'bundle.js'
}

devServer

webpack-dev-server 配置。

devServer: {
  contentBase: './dist',
  inline: true
}

module

配置 modules。

-- -------------------- ---- -------
------- -
  ------ --
    ----- --------
    -------- ----------------------------------
    ---- --
      ------- ---------------
      -------- -
        -------- ----------
      -
    --
  --
-

plugins

webpack 插件。

plugins: [
  new webpack.optimize.UglifyJsPlugin(),
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production')
  })
]

注意事项

1. 在使用 autopack 时，要保证项目中安装了对应版本的 webpack 和 webpack-dev-server。如果没有安装，可以使用以下命令进行安装：

npm install webpack webpack-dev-server --save-dev

1. autopack 默认会读取 autopack.config.js 文件，如果要修改默认配置文件的路径，可以使用 --config 参数：

autopack --config my_webpack_config.js

总结

autopack 是一款非常方便的 webpack 自动化工具，可以帮助开发者自动化执行 webpack 打包操作，节省了开发者手动执行 webpack 的时间和精力，提高了开发效率。熟练使用 autopack 不仅可以提高开发效率，还可以拓展自己的技术栈，对于进入前端开发行业的新手，学习轻松上手 autopack 将有助于给自己的前端职业之路打上一个良好的开始。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/71339