初识webpack

  • 2019-06-15
  • 149
  • 0
  • 0

    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,这样打包的文件就可以时刻监视要打包的文件的状态,如果要打包的文件内容改变后,就可以实现自动打包。

评论

还没有任何评论,你来说两句吧