simple config of webpack

Demo1操作手册

本Demo演示进行简单配置的基本使用

准备环境

初始化环境, cd到demo目录之后, 执行如下命令:

npm init -y
npm install webpack webpack-cli -D

L0

实际上在大多开发中默认配置肯定是不够用的, 下面演示webpack的配置.
新建src目录, 在里面创建index1.js, 内容如下:

function hi() {
  console.log('Hello Webpack!');
}
hi();

这个时候如果直接运行打包命令会报错, 因为已经没有了默认的入口文件了, 这个时候我们在根目录下添加webpack.config.js文件(这是webpack默认的配置文件的位置), 在里面输入如下内容:

module.exports = {
  entry: './src/index1.js'
}

接下来我们使用wepack对该文件进行打包:

webpack

打包完之后, 可以看到根目录下多出了一个dist目录, 里面多了一个main.js的文件, 打包成功.

我们继续配置输出文件, 修改webpack.config如下:

const path = require('path');
module.exports = {
  entry: './src/index1.js',
  output: {
    path: path.resolve(__dirname, 'dist1'),
    filename: 'output.js'
  }
}

修改完之后我们进行打包操作, 我们可以看到文件输出到了dist1/output.js, 运行一下发现一切正常, 我们成功配置了输出的目录和文件名.

L1

接下来的关于js配置都将在此项目中进行示范, 因此我们使用webpack命令的config参数来指定使用哪个配置文件来进行打包. 我们在根目录新建一个webpack.config的文件夹用来存放不同的配置文件. 同时为了方便运行, 我们将在package.json添加对应的scripts.

首先我们在webpack.config文件夹下新建文件l1.js, 内容如下:

const path = require('path');
module.exports = {
  entry: {
    output1: './src/index1.js',
    output2: './src/index2.js'
  },
  output: {
    path: path.resolve('dist'),
    filename: '[name].js'
  }
}

在package中添加如下scripts:

"l1": "webpack --config ./webpack.config/l1.js",

L1主要为了演示多文件入口, 因此我们在src目录下新建index2.js, 内容如下:

function hi() {
  console.log('Hello Webpack, I\'m index2!');
}
hi();

我们执行如下命令来运行:

npm run l1

在上述配置文件中, 我们使用了两个入口文件, 同时在output中使用了[name]作为占位符来指代输出文件名.

因此, 实际上在之前的单入口文件的配置其实等价是:

module.exports = {
  entry: {
    main: './src/index.js',
  }
}