初识webpack

    webpack 是一个现代 JavaScript 应用程序的静态模块打包器。简单的说，webpack是一个构建工具，帮助我们将开发好的项目打包，然后我们可以部署到生产环境。     首先我们需要全局安装webpack：cnpm i -g webpack。安装完成后使用webpack -v查看版本号。     然后在桌面新建一个文件夹hellowebpack，在这个文件夹下初始化项目npm init，一路回车，这样文件夹下就多了一个package.json文件。接着使用cnpm i -S webpack在此项目文件下安装webpack。     然后在项目文件下新建一个src文件夹用于存放项目文件，在src文件夹下新建一个app.js文件，内容写上console.log("hello webpack");保存。最后在项目根目录下新建一个webpack.config.js配置文件，webpack官网有配置示例，这里我改成下面内容：

const path = require('path');

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

    回到项目根目录下直接使用webpack即可直接启动，如果启动失败，则需要配置一下环境变量，百度一下即可，添加一个系统变量，变量名为：NODE_PATH，变量值为：你的npm下的node_modules文件夹。然后重新启动webpack即可，不带参数，默认是webpack -p，即在生产环境打包，打包完成后，在项目根目录下多了一个dist文件夹，里面是app.bundle.js打包好的文件，里面默认是打包成了一行代码，如果希望在开发环境打包，则前面使用webpack -b，这样打包好的文件就是正常的多行代码了。除了指定参数，还可以在webpack.config.js文件里指定参数mode: 'development'和mode: 'production'，分别对应开发环境和生产环境。

module.exports = {
    mode: 'production'
};

    在使用webpack命令打包时还可以加上参数--watch，这样打包的文件就可以时刻监视要打包的文件的状态，如果要打包的文件内容改变后，就可以实现自动打包。