webpack入门到进阶（二）配置

当webpack安装好以后，我们就要考虑webpack配置使用了。

webpack配置

 在webpack官网中，配置文件建议是webpack.config.js。

当然，你也可以更改，打开node_modules/webpack-cli下的config-yargs.js。

你可以找到这一行代码：

defaultDescription: "webpack.config.js or webpackfile.js"

可以看到，不仅仅可以使用webpack.config.js命名配置文件，也可以是webpackfile.js。

言归正传：

// webpack是基于node环境的，可以通过require('path')获取内置模块
var path = require('path');

//modelue.exports是Commmon.js语法规范
module.exports = {

  //打包所需的入口文件,可以改变
  entry: './src/index.js',

  //打包之后，输出文件的路径path，名称filename
  //注意：path在webpack2以后，就要求路径是绝对路径，否则会报错的
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },

  // mode默认是production(线上环境),在开发过程中，不想看到代码被频繁的压缩混淆，消耗时间，就需要声明mode为development。
  mode: 'development'
};

此时，在执行npx webpack：

就可以看到dist目录下多出来的bundle.js文件。文件里的内容就是没有被压缩混淆的。

我们继续配置，如果，我们在项目开发的过程中，每修改一次文件，都需要进行打包，就显得很是麻烦了。

 // mode默认是production(线上环境),在开发过程中，不想看到代码被频繁的压缩混淆，消耗时间，就需要声明mode为development。
  mode: 'development',

  //watch设置为true,可以检测文件改变后，进行打包
  watch: true

执行npx webpack，可以看到：webpack is watching the files...

当你修改index.js文件的时候，就会自动打包啦！

前面说过，我们项目有两种环境，一种是开发环境，一种是生产环境。我们进行打包上线的时候，如果每次都改变mode,是不是也不太方便。

为了解决，这个问题，我们可以创建两个webpack配置文件，如：webpack.production.js。

在这个文件里面设置mode:"production'"。

注意此时需要：执行：

npx webpack --config webpack.production.js

这样，我们就在dist文件下找到：

我们都会觉得上面的命令行，有点长。

我们可以通过修改，项目中的package.json文件进行命令行配置：

"scripts": {
    "bulid":"webpack --config webpack.production.js"
  }

执行：npm run bulid就可以啦，你们可以根据情况，随意配置。

未完待续！

webpack入门到进阶（三）