webpack

1. 认识webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器。在 webpack 处理应用程序时，它会在内部创建一个依赖图。用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个bundle。用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个bundle。

2. 建立webpack项目

首先全局安装webpack：

1	npm install -g webpack

全局安装webpack-cli:

1	npm install -g webpack-cli

新建项目文件夹，进入项目文件夹初始化项目：

npm init

自己新建source文件夹和public文件夹，public下新建index.html, source下放自己的js文件，目录结构如下：

在项目的根目录下新建一个webpack.config.js的文件进行一些配置：

module.exports = {
  mode: "none",
  entry:  __dirname + "/source/main.js",  //已多次提及的唯一入口文件
  output: {
    path: __dirname + "/dist",   //打包后的文件存放的地方
    filename: "bundle.js"        //打包后输出文件的文件名
  }
}

//__dirname: 是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

以我的项目为例，在source/main.js中开始编写自己的代码，在上面已经配置好了入口文件和打包后文件的存放路径和文件名，编写完成后开始打包：

webpack

此时就可看到打包成功，在根目录下多出一个dist文件夹，里面存放的是编译后的bundle.js, 将此js文件引入到html页面中则可生效。

也可以在package.json中的script中进行配置使用npm命令来执行打包：

"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "dev": "webpack --mode development",
   "build": "webpack --mode production"
 }

这样就可以使用npm run dev 和 npm run build命令了。

在使用npm run dev的时候如果报如下错：
error