快速入门实例 · Vue速学快练立上手

### 名词 * bundle，打包之后生成的文件，翻译是：包，束 * chunk，代码块，翻译：大块。多个chunk合在一起就是bundle。 ### 快速实例 1. 安装Node.js 2. 安装webpack 3. 创建项目目录和编写代码，这里的项目名字是webpack，该目录下的src目录存放源码。 webpack\src - hello.js , 作为被引用的子模块文件。定义一个hello()的方法。 - index.js，导入hello模块，并调用hello()函数。 4. 配置webpack.config.js 这里以index.js为入口文件进行打包，打包到dist\bundle.js文件中。 ``` const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } }; ``` * entry，入口，配置需要打包的入口文件 * output，打包后的路径和文件名配置 5. 在命令行执行webpack命令打包，命令执行完成，会在项目路径下产生dist\bundle.js。该文件的内容基本是看不懂了。 6. 使用打包后的文件，进行验证。在项目目录下创建index.html文件，内容如下： ``` <!doctype html> <html> <head> </head> <body> <script src="dist/bundle.js"></script> </body> </html> ``` 使用浏览器打开该文件既可以看到效果了。 ### package ``` npm -y init ``` 产生 package.json 文件，该文件是npm的模块描述文件。 ``` npm run test npm run dev ``` npm run script执行的时候会创建一个Shell，这个shell 将当前目录的可执行依赖目录（node_modules/.bin）添加到环境变量path中，执行之后恢复原样。会直接找到node_modules/.bin对应的脚本，而不需要加上路径。