使用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, './dist'),
   	    filename: 'main.js'
   	  },
   	  devServer: { // 该属性为配置一些和服务器相关的属性
   	    port: 4786, // 端口
   	    open: true, // 是否自动打开浏览器
   	    contentBase: 'src', // 基本内容地址
   	    hot: true // 是否启动热更新
   	  },
   	  plugins: [
   	    new webpack.HotModuleReplacementPlugin(),
   	    // 开启热更新的最后一步
   	    new htmlWebpackPlugin({ // 定义项目页面模板
   	      template: path.join(__dirname, './public/index.html'),
   	      filename: 'index.html'
   	    }),
   	  ],
   	  module: {
   	  	rules: []
   	  },
   	  resolve: {
   	    alias: { //修改导入包路径
   	    }
   	  }
   })
   

6. 接下来我们在package.json中的script属性下设置项目启动和打包命令：

   	"scripts": {
   	    "test": "echo \"Error: no test specified\" && exit 1",
   	    "dev": "webpack-dev-server",
   	    "build": "webpack --config webpack.config.js"
   	 },
   

   以后我们都可以用：npm run dev 来运行项目，npm run build 来编译项目

7. 接下来我们配置一下一些文件的加载器：

   	cnpm i style-loader css-loader -D
   	这两个包分别为处理 style 和 css 的加载器
   	cnpm i file-loader -D
   	这个加载器主要用于加载一些静态文件所用
   	cnpm i node-sass sass-loader -D
   	这两个加载器用于处理 scss 样式
   	cnpm i less less-loader -D
   	这两个加载器用于处理 less 样式
   	cnpm i vue-loader -D
   	这个加载器用于处理 vue 模块
   

8. 现在我们在webpack.config.js文件里配置下加载器的加载规则：

   	module: {
   	    rules: [
   	      { test: /\.css$/, use: ['style-loader', 'vue-style-loader', 'css-loader'] },
   	      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
   	      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
   	      { test: /\.vue$/, use: 'vue-loader' },
   	      { test: /\.(jpg|png|gif|jpeg|bmg|webp)$/, use: 'file-loader?limit=7632&name=[hash:8]-[name].[ext]' }, // 处理图片路径的 loader
   	      // limit 图片处理限制大小,当图片大小小于给定的值时则，进行base64编码,
   	      // name属性设置不给图片进行重命名
   	      // hash:8 8位的hash码
   	      // ext 文件扩展名
   	      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'file-loader' },
   	    ]
   	},
   

9. 现在我们一个weboack项目基本配置完了，接下来我们来安装一下vue所需要用到的依赖：

   	cnpm i vue-template-compiler -D
   	该文件为编译 vue 模板用的
   	cnpm i vue -S
   	该文件为 vue 框架文件
   	cnpm i vue-router -S
   	该文件为 vue 路由文件
   

   安装完成后，我们在 webpack.config.js里配置如下：

   	const vueLoaderPlugin = require('vue-loader/lib/plugin')
   	// 导入 vueLoaderPlugin 模块
   	// 在 plugins 中加入：
   	new vueLoaderPlugin()
   	// ========
   	resolve: {
   	    alias: { //修改导入包路径
   	      "vue$": "vue/dist/vue.min.js" // 这里可以自行修改
   	    }
   	}
   

   这样一个 vue 项目就搭建好了，但有一个问题，比如我们，想用 es6 或者更高的，怎么办呢？接下来我们就要借助 babel-loader

10. 我们得安装以下文件：

    	cnpm i -D babel-loader @babel/core
    	cnpm i @babel/preset-env -D
    	cnpm i -S @babel/polyfill
    	=========================
    	cnpm i babel-plugin-transform-object-rest-spread -D
    	cnpm i @babel/plugin-proposal-object-rest-spread -D
    	※ 以上两个命令都是用来转换用的，随便挑一个，不过建议使用第二个，
    	因为第一个有时候会出问题
    

11. 现在我们来配置一下：

    • 在根目录下新建一个 .babelrc 文件

    • 在webpack.config.js中modules中配置babel：

      	{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: "babel-loader" }
      	// exclude : 该属性为忽略某文件夹
      

      我们现在只是打通了webpack和Babel的联系，还没有用Babel干任何事情，这时候需要用到babel-preset来将es6语法转化为es5语法。

    • 在 .babelrc 文件下写入：

      	{
      	     "presets": ["@babel/preset-env"],
      	}
      

      到目前为止我们已经完成了将es6语法转化为es5语法的配置，比如会将const，let转为var，将=>函数转为function，但是使用新的内置函数，如promise或weakmap、静态方法（如array.from或object.assign）、实例方法（如array.prototype.includes）和生成器函数（前提是您使用再生器插件）时是不会转换的。这时候就需要用到polyfill了

    • 现在，我们继续配置 .babelrc 文件：

      	{
              "presets": [["@babel/preset-env",{
                "useBuiltIns": "usage"
             }]]
          }
      

      以前我们在使用的时候需要引入polyfill，import "@babel/polyfill"或者单独在webpack中配置引入polyfill。但是现在不用了，使用useBuiltIns:"useage"即可。
      useBuiltIns配置项两个作用：

        1. 帮助我们在打包js文件时自动引入polyfill
        2. 仅引入需要转换的polyfill，比如你使用了promise，那么只引入promise相关的polyfill而不会将整个polyfill文件引入，大大减小文件体积
      

    • 在 presets 属性后面再加一个属性：

      	{
      	  "presets": [["@babel/preset-env",{
      	    "useBuiltIns":"usage"
      	  }]],
      	  "plugins": ["@babel/plugin-proposal-object-rest-spread"]
      	  // 依你安装的那两个其中的一个文件而定
      	}
      

over

若有问题，敬请指教！