使用webpack搭建一个VUE工程项目

webpack 工作原理

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

构建一个webpack工作环境

1. 首先创建如下所示文件：
   

• 其中assets文件夹与static文件夹的区别:

  • 相同点：资源在html中使用，都是可以的。
  • 不同点：使用assets下面的资源，在js中使用的话，路径要经过webpack中file-loader编译，路径不能直接写。
  • assets中的文件会经过webpack打包，重新编译，推荐该方式。而static中的文件，不会经过编译。项目在经过打包后，会生成dist文件夹，static中的文件只是复制一遍而已。简单来说，static中建议放一些外部第三方，自己的放到assets，别人的放到static中。

• dist 文件夹主要是用于项目上线的时候存放打包所产生的各类文件夹和文件。

• public 文件夹主要是用于存放一些公共的都能访问的文件，像一些图片啊，字体图标文件啊啥的。

• src 文件夹主要是存放一些子页面和 mian.js

注意：如果把图片放在assets与static中，html页面可以使用；但在动态绑定中，assets路径的图片会加载失败，因为webpack使用的是commenJS规范，必须使用require才可以。

2. 创建一些必要的文件：

   • 在src下创建一个main.js文件，main.js文件为vue实例的入口文件。
   • 在public下创建一个index.html文件，该文件为项目页面入口文件。

3. 使用以下命令来初始化项目：

   	npm init -y
   

4. 使用以下命令来安装webpack相应工具：

   	cnpm i webpack webpack-cli -D  
   	用于打包所用
   	cnpm i html-webpack-plugin -D  
   	用于指定模板页面，将来会根据制定页面路径，去生成内存中的指定页面
   	cnpm i webpack-dev-server -D
   	用于在项目运行的时候开启一个服务
   

5. 在根目录下创建一个 webpack.config.js文件并写入以下内容：

   	const path = require('path')
   	const htmlWebpackPlugin = require('html-webpack-plugin')
   	const webpack = require('webpack')
   	module.exports = ({
        
   	  entry: path.join(__dirname, './src/main.js'), // 该属性为定义项目入口文件
   	  output: {
         // 该属性为定义项目输出目录和文件
   	    path: path.join(__dirname