webpack学习笔记（二）：认识配置和命令执行

在上一篇webpack学习笔记中，直接在命令行中使用npx webpack对项目进行打包时所使用的配置都是默认的，入口文件默认是src目录下的index.js文件，输出文件默认是dist文件夹下的main.js，这两个分别对应webpack中的Input和Output核心配置模块，而这些配置我们可以在webpack配置文件webpack.config.js中进行指定配置。

• 在项目根目录下创建webpack.config.js文件，并且配置入口文件为a.js，出口文件为bundle.js。其中a.js内容：

const say = function() {
  console.log('say')
}
say()

webpack.config.js内容如下：

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

删除原来的dist文件夹，在命令行中输入npx webpack执行，可以看到dist文件夹下的js文件变成了bundle.js：

• 可以指定输出文件的路径，webpack内容如下：

const path = require('path')
module.exports = {
  entry: './src/a.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './list')
  }
}

打包后可以看到：

• 可以指定一个配置文件进行打包，上面执行npx webpack打包命令默认是根据webpack.config.js配置文件打包的。可以再创建一个webpack.dev.config.js配置文件，将打包模式设置为开发环境，并删除原有的list目录：

const path = require('path')
module.exports = {
  entry: './src/a.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './list')
  },
  mode: 'development'
}

命令行输入npx webpack --config webpack.dev.config.js执行，改变配置文件了，点开list目录下的bundle.js进行查看，可见开发环境下代码不会被压缩，内容比生产环境下冗杂：

• 命令npx webpack --config webpack.dev.config.js有点长，可以将该命令写入package.json文件的script对象中：
  
  然后在命令行输入npm run dev，同样可以执行打包，但是命令简短很多。之后如果有比较长的命令都可以写在这里，然后用npm run+script的属性名来执行对应的命令。

本篇笔记是看了B站up主“左耳击水兽”的讲解视频记录下来，感兴趣的同学可以直接看他视频哦。