webpack(2)_打包JS

webpack打包

前端打包就是把所有的 js 文件, css 文件都分别压缩合并为一个js 和css 文件, 这样浏览器就可以通过少量的 HTTP 请求获取到所需要的前端资源, 可以节省流量, 加快页面加载速度。当然打包过程还需要对TypeScript、Vue等js解析，Less、Sass、Stylus等css预处理、资源的合并压缩、js合并、混淆、兼容优化等。

打包方式

webpack可以对js进行一系列的打包处理，主要有两种方式：

• 命令行打包
  webpack entry<entry> output
• 通过配置文件打包
  webpack --config webpack.config.js

命令行打包

命令webpack entry output：entry是要打包的js文件，output是要输出的打包完成的文件。
如将app.js打包成bundle.js放在output目录下，示例：
webpack app.js ./output/bundle.js

通过配置文件打包

webpack除了使用命令行打包外，还可以通过配置文件进行打包，一般情况下，项目都是通过webpack配置文件对js进行打包。文件名一般为webpack.config.js。
若配置文件名为webpack.config.js，只需要在命令行输入webpack即可执行webpack.config.js配置文件。若配置文件名不为webpack.config.js则需要执行命令webpack --config webpack.conf.js。

• 以下是一个常见的简单配置

module.exports = {
    entry: {
        app: './app.js'
    },
    output: {
        filename: './output/[name].[hash:5].js'
    }
}