浅谈webpack

可能也是因为最近比较闲，所以才有功夫来看了下外国的webpack文档以及社区。
webpack官网
因为webpack4和之前的版本有所区别所以我这里只是介绍下webpack4.x版本了。

• 首先，我们需要创建一个文件夹，我这里命名是ceshi3。

• 这个文件夹下，我创建一个src文件夹用来存放打包前的代码。创建一个dist来存放打包之后的代码。创建一个config来存放webpack配置代码。

  
  
  

  创建文件夹
• 接下来我们通过npm 安装 webpack、webpack-cli、webpack-dev-server这三个插件。
• 然后我们在config文件夹下创建一个文件名为webpack.dev.js来配置webpack。我们先在src下创建一个main.js。让这个js文件作为入口文件。
• 我们随便在main.js文件中写一个函数。然后我们开始写webpack.dev.js。首先我们引入node的path模块，然后配置入口和mode以及出口，这三个是必须的。代码如下：

const path = require("path");

module.exports = {
    entry: {
        main: "./src/main.js"
    },
    mode: "development",//development（开发模式）和production（生产模式）
    output: {
        filename: "[name]-bundle.js",
        path: path.resolve(__dirname,"../dist"),
        publicPath: "/"
    }
};

然后我们后台执行

webpack  --config=config/webpack.dev.js

接下来我们就会发现打包成功，在dist文件夹中出现一个main-bundle.js

打包成功

其实块我一般是为了方便起见，我会把后台执行的那行代码写到package.json文件中。

{
  "dependencies": {
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.7"
  },
  "scripts": {
    "build": "webpack --config=config/webpack.dev.js"
  }
}

这样我们就可以直接在控制台输入

cnpm run build

这样就可以了。