webpack入门——构建简易版vue-cli

用vue-cli1/2搭建一个vue项目时，可以看到有很多关于webpack配置的文件。我们不需要知道那些繁琐的配置文件有什么作用，只需在控制台输入npm run dev，项目自动启动，我们就可以愉快的写业务代码了。

虽然vue-cli帮我们做好了一切，我们就能不用学webpack了吗？NoNoNo...现代前端工程师必备的技能就是模块化构建打包项目，不信去那些招聘网站的前端JD看看。废话不多说，下面让我们用webpack构建一个简单的vue-cli。

 

第一步：安装NodeJS（webpack基于NodeJS）

下载地址：http://nodejs.cn/download/，傻瓜式安装，一直下一步就ok。安装完毕，在控制台输入node -v检查是否按照成功。

NodeJS是JavaScript的运行环境，像浏览器一样。安装之后可以通过node命令运行JavaScript代码，比如：node a.js

npm（node package manage of JavaScript）作用：Node.js下载后自带npm，类似于迅雷下载资源，可以下载项目所需的依赖模块/包。

1. 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
2. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
3. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
   
   npm是国外的，可能会比较慢，建议安装cnpm，安装方法：npm install -g cnpm --registry=https://registry.npm.taobao.org

第二步：npm init初始化生成package.json

1. 首先建立一个空的项目文件夹，
2. 进入文件夹，shift+右击，出现【在此处打开命令窗口(W)】，
3. 点击进入cmd控制台，命令路径即为当前文件夹目录，
4. 然后输入npm init -y，回车，之后会在根目录创建一个package.json。
   
   package.json用来存放整个项目的依赖模块/包，当我们把整个项目迁移到别的地方使用时，项目运行时会根据package.json的依赖参数自动下载所需模块/包。

第三步：安装webpack

命令：npm install webpack@3.12.0 --save-dev

测试webpack在本地是否可用，webpack -v如果出现webpack为无效命令，则使用全局安装webpack：npm install webpack@3.12.0 -g。安装成功后就可以使用webpack命令玩耍了。

建议安装wepack3，webpack4对vue-cli的兼容还不是很好

webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。

第四步：webpack打包模块

很多文件类型，比如vue、css、img、字体...需要我们配置相应的loader才能完成正确解析并打包。

比如，把css打包到js文件中，需要安装css加载器，安装命令：npm install --save-dev style-loader css-loader
css-loader 和 style-loader，二者处理的任务不同
css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能
style-loader将所有的计算后的样式用<style></style>加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中 

命令行打包（不推荐）：

webpack {entry file} {destination for bundled file} // 如webpack ./js/main.js ./dist/bundle.js 自动创建dist目录

这种打包方式，在js文件中引入css文件时要注明loader：require('style-loader!css-loader!../css/index.css') 注意顺序不能错！ 

配置文件打包（推荐）：
需要在项目的根目录创建webpack.config.js.项目里配置如下：

module.exports = {entry:  __dirname + "/src/main.js",// 入口文件，可以多个 output: { path: __dirname + "/dist", // 绝对路径，打包后的文件存放的文件夹 filename: "build.js" // 相对路径，打包后输出的文件 }, 　 // 1. 不同webpack版本配置loader的方式不同，webpack3用loaders，webpack4用rules // 2. 命令行方式引入css的require('style-loader!css-loader!../css/index.css') 就可以写成 require('../css/index.css') 　module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.(jpg|png|jpeg|svg)$/, loader: 'url-loader', options: { // 大于10000字节会被打包成重命名的图片资源，否则打包成base64 limit: 10000 // name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, options: { presets: ['env'], // 处理关键字，es6/7/8/9...都能转化 plugins: ['transform-runtime'] // 处理函数 } } ] } }

package.json中配置scripts:{"build": 'webpack'}（webpack命令会默认运行webpack.config.js文件），执行npm run build即可打包

第五步：搭建webpack服务器

上面4步就可以完成项目的打包任务，但是开发环境还需要更进一步配置。

webpack-dev-server可以像php/java/.net...一样搭建为我们搭建一个服务器，这样就可以热更新项目代码，实现实时运行项目，进而方便我们调试项目。

1. 1. 安装： npm install webpack-dev-server -g
   2. 写入到依赖： npm install webpack-dev-server --save-dev
   3. 配置命令：scripts:{"dev": 'webpack-dev-server --hot --inline'} // 实现热更新和在线编译
   4. 运行命令：npm run dev
   5. 输入localhost:8080/运行... // webpack-dev-server的默认端口是8080

具体代码见：https://github.com/tzy13755126023/webpack-vue-cli

最后，webpack版本更新很频繁，各种npm包也更新很频繁，这就会导致一个兼容问题，动不动就报错，这点很让人头疼，很容易会导致从入门到放弃。