webpack3.x文件配置

「爱情、让人受尽委屈。」 2022-06-07 10:41 256阅读 0赞

--------------------

## webpack3.x 配置 ##

**webpack3.x 主配置`webpack.config.js`文件，每个模块的详细信息都有一定的注释，如果有不对的地方，还请指教！**

**大纲：**

> 1、创建`package.json`文件
> 
> 2、创建`.babelrc`文件
> 
> 3、创建`webpack.config`文件

目前3个文件即可,下面具体介绍：

--------------------

#### **一、基础配置** ####

1、首先全局安装`webpack` 的基础配置，

> `npm i webpack -g`

在本地如果没有`package.json` 文件，可以执行初始化操作

> `npm init`

2、创建`package.json` 文件

{
      "name": "demo",
      "version": "1.0.3",
      "description": "EOI",
      "main": "gulpfile.js",
      "dependencies": { "babel-preset-es2015": "^6.24.1", "vue": "^2.4.4", "vue-hot-reload-api": "^2.1.0", "vue-html-loader": "^1.2.4", "vue-loader": "^13.0.5", "vue-resource": "^1.3.4", "vue-router": "^2.7.0", "vue-style-loader": "^3.0.3", "vue-template-compiler": "^2.4.4", "vue-touch": "^1.1.0" },
      "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-transform-runtime": "^6.23.0", "babel-polyfill": "^6.26.0", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "babel-runtime": "^6.26.0", "clean-webpack-plugin": "^0.1.17", "css-loader": "^0.28.7", "enhanced-resolve": "^3.4.1", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "gulp": "^3.9.1", "gulp-imagemin": "^3.3.0", "gulp-load-plugins": "^1.5.0", "gulp-sftp": "^0.1.5", "html-webpack-plugin": "^2.30.1", "ip": "^1.1.5", "less": "^2.7.2", "less-loader": "^4.0.5", "path": "^0.12.7", "react": "^16.0.0", "style-loader": "^0.18.2", "text-loader": "^0.0.1", "url-loader": "^0.5.9", "vue": "^2.4.4", "vue-loader": "^13.0.5", "vue-router": "^2.7.0", "vuex": "^2.4.1", "watchpack": "^1.4.0", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.1", "xml-loader": "^1.2.1" },
      "scripts": { "build": "set NODE_ENV=prod&&gulp imgMin --progress --colors", "testBuild": "gulp TestBuild --progress --colors", "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build", "devTest": "gulp devTest", "devDist": "set NODE_ENV=prod&&gulp devTest218 --progress --colors", "devDistMainline3": "gulp devDistMainline3" },
      "author": "",
      "license": "ISC",
      "repository": { "type": "git", "url": "bai" } }

上面是`webpack`、`vue`及其`es6`的转码安装的版本信息介绍。

**着重介绍下**： `package.json` 文件中的`scripts`，这里边可以自己配置，表示启动node命令：

比如说平时运行的：`npm run build`、`npm run dev`,`npm run start` 等等就是在这里配置的，同时也可以自定义，如果不明白啥意思：看这里 => [点我][Link 1]！

--------------------

#### **二、安装使用命令：(2种安装方法，任何一种都行)** ####

**1、简单方法：**

复制上面的 `package.json`文件到你的工作目录，执行

> `npm install`

即可，他会自动下载 `package.json`文件中的所有依赖包文件

优点：省事儿方便，一条命令一部到位。  
缺点：只会下载 `package.json`文件的指定版本，如果webpack有升级到3.x ++ 的话，就达不到你想要的效果了（我会时刻更新），如果这样，那么使用2的解决方案：

**2、可以使用 `npm i vue webpack --save-dev` 等等去下载：**

例如：

npm i --save-dev babel-core babel-loader babel-plugin-transform-runtime babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-runtime clean-webpack-plugin css-loader enhanced-resolve extract-text-webpack-plugin file-loader html-webpack-plugin ip less less-loader path style-loader text-loader url-loader vue vue-loader vue-router vuex watchpack webpack webpack-dev-server xml-loader

**PS：**

1、如果`npm`不能使用的话，可以使用淘宝的镜像`cnpm`,进行操作

> npm install -g cnpm –registry=[https://registry.npm.taobao.org][https_registry.npm.taobao.org]

2、如果是`linux`系统或者`mac`，前面可以加上`sudo`，以管理员去安装，部分插件写入系统是需要管理员权限的！

--------------------

#### **三、创建webpack.config.js文件** ####

**PS：介绍**：

1、如果中途哪个模块出问题了，或者找不到了，直接使用`npm i 模块名 --save-dev`进行安装即可！

2、模块功能介绍：

`webpack.config.js`中的==`devServer`==的信息介绍：

--content-base <file/directory/url/port>：内容的基本路径。 --quiet：不要将任何东西输出到控制台。 --no-info：抑制无聊的信息。 --colors：向输出添加一些颜色。 --no-colors：不要在输出中使用颜色。 --compress：使用gzip压缩。 --host <hostname/ip>：主机名或IP。绑定到所有主机。0.0.0.0 --port <number>： 港口。 --inline：将webpack-dev-server运行时嵌入到包中。 --hot：添加并将HotModuleReplacementPlugin服务器切换到热模式。注意：确保不要再添加HotModuleReplacementPlugin两次。 --hot --inline还添加了webpack/hot/dev-server条目。 --public：覆盖--inline客户机模式下使用的主机和端口（对VM或Docker有用）。 --lazy：不看，根据要求进行编译（不能与之组合--hot）。 --https：通过HTTPS协议提供webpack-dev-server。包括在提供请求时使用的自签名证书。 --cert，--cacert，--key：路径的证书文件。 --open：在默认浏览器中打开url（对于webpack-dev-server版本> 2.0）。 --history-api-fallback：支持历史API后备。 --client-log-level：控制浏览器中显示的控制台日志消息。使用error，warning，info或none

--------------------

#### **四、最后一步：建立`.babelrc`文件** ####

{
      "presets": ["es2015", "stage-0"],
      "plugins": ["transform-runtime"],
      "comments": false,
      "env": { "build": { "optional": ["optimisation", "minification"] } } }

--------------------

#### **五、完成** ####

安装成功之后，就可以配置 ==webpack.config.js== 中的你的入口文件了！

--------------------

gitHub地址：[这里写链接内容][Link 2]

[Link 1]: http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
[https_registry.npm.taobao.org]: https://registry.npm.taobao.org
[Link 2]: https://github.com/yubai8/Rkatsiteli/tree/master/Webpack3.x%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6