在一些面试中，会问到在Vue的实际项目开发中都用到哪些loader,可能我们都关注于项目本身的一些业务场景，实现逻辑，项目当中的一些比较重要的配置可能在我们做项目之前都已经配置好了，我们上来就只是写逻辑，熟悉业务，修改bug,但是，我们应该在项目之余了解一些这些，免得自己见过，用过，但是在面试的时候却答不上来。
随着ES 6的模块化发展，前端也有了和java一样的模块化开发,大大提高了项目管理和后期维护的效率。
常见的构建工具：
Gulp,Npm Script,Grunt,Webpack等，Webpack之所以这么流行是因为它符合单页面开发的需要，极大地简化和提高了单页面开发的效率。
1.安装webpack
npm i -D webpck //安装最新的稳定版本
npm i -D webpack@<version> // 安装指定的版本
npm i -D 是npm install --save-dev的简写，是指安装模块并保存到package.json的devDependencies
npm i -g webpack是全局安装,安装到全局后，可以在任何地方共用一个webpack 可执行文件，而不用各个项目重新安装。但是不推荐这种全局安装，因为会有不同项目因为依赖版本不同导致冲突问题。
webpack只执行构建时会默认从项目根目录下的webpack.config.js文件中读取配置信息，所以我们还需要新建它，内容如下：
const path = require('path');
module.exports = {
//javascript执行入口文件
entry: './mian.js',
output: {
//将所有依赖的模块合并并输出到一个bundle.js文件
filename: 'bundle.js',
//将所有输出文件都放到dist目录下
path: path.resolve(_dirname, './dist');
}
};
由于webpack实在nodejs环境下运行构建，所以该文件最后需要通过CommonJs规范导出一个描述如何构建构建Object对象
目录如下：
| -- index.html
| -- main.js
| -- show.js
| -- webpack.config.js
webpack 是一个打包模块化javascript的工具，它会从main.js出发，识别出源码中的模块导入语句，递归的找出文件所有的依赖，将入口和其他所有依赖打包到一个单独的文件中。
从webpack2 版本开始。webpack已经内置了对ES6,CommonJS,AMD模块化的支持。
使用Loader
module: {
rules: [
{
test: /\.css$/,//使用正则匹配
use: ['style-loader', 'css-loader?minimize']
}
]
}
在重新执行webpack构建前，要先安装新引入的Loader:
npm i -D style-loader css-loader // 安装css Loader
其他一些常用插件
npm i -D extract-text-webpack-plugin // 提取js中的css代码到单独的文件中
npm i -D webpack-dev-server //安装devServe 请求服务器资源文件
npm i -D i18n-webpack-plugin //使网页支持国际化插件
npm i -D serviceworker-webpack-plugin //为网页引用增加离线缓存工程插件
