Webpack 是什么?

java

如果你已经熟悉了 Webpack，随时可以跳过下面的说明。如果你没有使用过 Webpack,下面是一个快速介绍：

Webpack 是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块，找出他们的依赖关系，将它们打包为可部署的静态资源。

一个基本的例子，想像我们有一些 CommonJS 模块，它不能直接在浏览器中运行，所以我们需要打包成一个文件，这样就可以通过<script> 标签加载。Webpack 可以遵循 require() 调用的依赖关系，为我们完成这些工作。

但是 Webpack 可以做的不止这些。使用 "loaders"，我们可以配置 Webpack 以任何方式去转换所有类型的文件。包括以下例子：

• 转换 ES2015，CoffeeScript 或者 TypeScript 模块为普通的 ES5 CommonJS 模块；
• 可以选择在编译之前检验你的源代码；
• 将 Jade 模版转换为纯 HTML 并且嵌入 Javascript 字符串中；
• 将 SASS 文件转换为纯 CSS，然后将其转换成 JavaScript 片段，将生成的 CSS 作为 <style> 标签插入页面；
• 处理 HTML 或者 CSS 中引用的图片，移动到配置的路径中，并且使用 md5 hash 重命名。
  

当你理解 Webpack 原理后会感觉它是如此强大，它可以大大优化你的前端工作流程。它主要的缺点是配置复杂麻烦，但是使用本指南，应该可以帮助你找到 Vue.js 和 vue-loader 使用时的最常见问题的解决方案。

https://vue-loader.vuejs.org/zh-cn/

java

http://donglegend.com/2016/08/24 ... 4%BA%8B%E5%84%BF01/

install webpack

1. npm install webpack -g  #首先全局安装(注意权限问题，用sudo)
   
2. mkdir projectname && cd projectname #新建项目目录
   
3. npm init # 初始化自动创建package.json文件，一路默认回车即可
   
4. npm install webpack --save-dev #局部安装，写入依赖

复制代码

http://donglegend.com/2016/08/24/webpack%E9%82%A3%E4%BA%9B%E4%BA%8B%E5%84%BF02/
配置webpack.config.js文件

1. # 根目录新建webpack.config.js(webpack 会自动寻找一个叫webpack.config.js的文件去执行)
   
2. var path = require("path");
   
3. module.exports = {
   
4.         entry: {
   
5.                 app: path.resolve(__dirname, "./app/main.js")
   
6.                 // entry:顾名思义入口文件,app/main.js,输入名字为 app.js
   
7.         },
   
8.         output: {
   
9.                 path: path.resolve(__dirname, "./output/static"),//输出路径
   
10.                 publicPath: 'static/', //调试或者 CDN 之类的域名,稍候会用到
    
11.                 filename: "[name].js" //配置生成的文件名
    
12.         },
    
13.         resolve: {
    
14.                 root: __dirname,  //模块从里开始查找
    
15.                 extensions: ['', '.js', '.vue'] //模块后缀名，先这么些，稍候会用到
    
16.         },
    
17.         module: {
    
18.                 loaders: [] //模块加载器，默认null
    
19.         },
    
20.         plugins: [] //插件，默认null
    
21. }
    
22. # 在终端执行命令：webpack
    
23. #（不出意外，会生成output目录,/output/static/app.js）

复制代码

启动一个http服务

1. # 根目录新建dev-server.js
   
2. var express = require("express");
   
3. var app = express();
   
4. var port = process.env.PORT || 3000;
   
5. app.use(express.static(__dirname+'/'));
   
6. app.listen(port, function (err){
   
7.         if (err) {
   
8.                 throw err;   
   
9.         }
   
10.         console.log('Listening at http://localhost:' + port + '\n')
    
11. })
    
12. # 执行命令 sudo cnpm i express --save-dev
    
13. # 安装完成 执行命令: node dev-server.js
    
14. # Listening at http://localhost:3000
    
15. # 服务正常启动,chrome浏览器输入  http://localhost:3000/app/views/index.html
    

复制代码

体验loader加载器功能sudo npm i vue vue-loader --save-dev    -----使用 --save-dev 安装的 插件，被写入到 devDependencies 对象里面去 只用于开发环境  发布后vue会转成html标准，故不用相应模块了
看package.json(vue默认依赖babel等模块 http://www.ruanyifeng.com/blog/2016/01/babel.html)

1. "devDependencies": {
   
2.     "babel-core": "^6.13.2",
   
3.     "babel-loader": "^6.2.5",
   
4.     "babel-plugin-transform-runtime": "^6.12.0",
   
5.     "babel-preset-es2015": "^6.13.2",
   
6.     "babel-runtime": "^6.11.6",
   
7.     "css-loader": "^0.24.0",
   
8.     "express": "^4.14.0",
   
9.     "vue": "^1.0.26",
   
10.     "vue-hot-reload-api": "^1.3.3",
    
11.     "vue-html-loader": "^1.2.3",
    
12.     "vue-loader": "^8.5.2",
    
13.     "vue-style-loader": "^1.0.0",
    
14.     "webpack": "^1.13.2"
    
15. }

复制代码

1. # webpack.config.js 文件的 module增加vue和babel加载器
   
2. loaders: [{
   
3.         test: /\.vue$/,
   
4.         loader: 'vue'
   
5. }, {
   
6.         test: /\.js$/,
   
7.         loader: 'babel',
   
8.         query: {
   
9.         presets: ['es2015']
   
10.     },
    
11.         include: "/",
    
12.         exclude: /node_modules/
    
13. }]

复制代码