Webpack4.0基础教程一：准备工作

准备工作

1.初始化项目目录：npm init -y

2.建立以下的目录结构：

--dist

--src

----index.js

--package.json（初始化后生成）

3.完成基本的webpack配置：

首先，安装基本的webpack包：

npm install --save-dev webpack webpack-cli

注：webpack4对webpack内核与cli进行了分离，故而需要分别下载webpack和webpack-cli。

 

接着，进行简单的webpack配置：

在根目录下创建webpack.config.js：

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

4.在package.json文件的scripts属性下配置npm脚本：

"scripts": {
  ...
  "build": "webpack"
  ...
}

注：webpack进行打包最简单的命令形式是通过在script中进行编写，可以直接敲命令行进行运行，或者当node全局下安装了webpack和webpack-cli时，也可以直接通过webpack命令运行webpack（全局下的缺陷是版本固定，当开发基于不同webpack版本的项目时不适用，故而正确的开发模式是直接在项目中配置webpack，并通过script脚本命令进行运行打包）。

不通过全局webpack命令和script命令也是可以运行webpack，缺点就是很麻烦，比如我们命令行进入项目的根目录，然后输入“./node_modules/.bin/webpack”然后回车即可。

5.这个时候我们只要在终端输入npm run build就可以对src目录下的index.js文件打包，在dist目录下生成bundle.js文件。