使用webpack打包vue项目

1. 安装webpack工具，安装方式有两种：全局安装（命令：npm install -g webpack webpack-cli）以及安装在项目中，这里使用第二种：

   //在项目中安装，这里的-D表示运用到开发(development)环境
   npm install -D webpack webpack-cli
   

2. 在项目根目录新建一个webpack.config.js文件，配置打包时候需要的一些插件。**作用: 指示 webpack 干那些活(当你运行 webpack 指令时, 会加载里面的配置)**添加代码如下：

const path = require('path') // 引用path模块
module.exports = {  // 这里是commrnt.js语法
    // 入口文件
    entry:"./src/main.js",
    // 打包后的出口文件
    output:{
        // 输出的路径  是绝对路径(导入path模块) 这里是用node来做的
        path:path.resolve(__dirname,'build'),
        // 输出的文件名称
        filename:'build.js',
    },
    //配置webpack开发服务功能
    devServer:{
    contentBase: "./src", //本地服务器所加载的页面所在的目录
    host: "localhost",
    inline: true, //实时刷新
    compress: true,
    port: 8080,
    },
    mode:"development"
}

3. 在package.json文件中配置打包命令：
   

   之后就可以使用npm run build命令对整个vue项目进行打包了。

4. 配置Loaders

   上面给出的webpack.config.js的内容还不完整，所以会报错。这里附上官网地址，官网给出的解释如下：

意思是webpack只能打包JavaScript和JSON文件。Loaders允许webpack处理其他类型的文件，Loaders有两个属性：test属性标识要转换的文件；use属性指示应该使用哪个loader（加载器)进行转换。而我们的项目是vue工程，肯定包括.vue文件和html文件，那么如何让webpack解析.vue文件以及html文件呢？首先看个官网例子就大概能清楚怎么解析.vue文件了。

4.1 解析.vue文件

module.rules允许我们在webpack配置中指定多个类型的loaders。首先，按照官网提示，首先下载需要的vue-loader，在项目终端执行命令：

npm install --save-dev vue-loader

然后在webpack.config.js中使用该loader：

module.exports = {
  module: {
    rules: [
      { test: /\.vue$/, use: 'vue-loader' },
    ],
  },
};

还要加上:

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    //...
    plugins:[
          new VueLoaderPlugin(),
    ]
    //...
}

像下图这样：

不然会报错：ERROR in ./src/App.vue Module Error (from ./node_modules/vue-loader/lib/index.js): vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

原因：

官方在vue-loader15以上必须要配合插件使用

信心满满地以为这次马到成功，结果还是报错：

Module parse failed: Unexpected character ‘#’ (46:0) File was processed with these loaders:./node_modules/vue loader/lib/index.js You may need an additional loader to handle the result of these loaders.

解决办法：

vue-loader@15.*之后除了必须带有VueLoaderPlugin 之外，还需另外单独配置css-loader。

所以在终端执行命令npm install --save-dev css-loader，再在webpack.config.js里面加上：

module.exports = {
    //...
    module: {
        rules: [
          { test: /\.css$/, use: 'css-loader' },
        ],
    },
    //...
}

还有很多类型的文件解析loader，可以根据官网文档loader部分下载相应的loader，并在webpack.config.js里进行使用。一般只要报错，就是版本问题，可上网搜索解决办法。

4.2解析html

跟上面同样的步骤，下载html-loader，再在webpack.config.js使用即可，但是也需要配合plugin使用。所以需要在webpack.config.js加入以下内容：

const HtmlWebpackPlugin = require("html-webpack-plugin")
//...

plugins:[
          //...
          new HtmlWebpackPlugin({
              template: path.resolve(__dirname, './public/index.html')
          })
    ],

4.3图片资源打包（.png/.jpg/.gif）
我的项目中还有图片资源需要打包，所以还需要下载url-loader，并在相应部分添加：

 {
              // 处理图片资源
            test: /\.jpg|png|gif$/,
            // 只使用一个loader处理，写法如下：
            // 下载 url-loader 和 file-loader
            loader:'url-loader',
            // loader的配置可以通过option来配置
            options: {
              // 图片大小小于12kb，就会base64处理
              // 通常我们只会对8-12kb以下的图片进行base64处理
              // 优点：减少请求数量（减轻服务器压力）
              // 缺点：图片体积会更大（文件请求速度更慢）
              limit: 12 * 1024
            }
          }

4.4多个js文件打包成一个文件
项目里面有多个js需要打包成一个js文件，必须使用模块化开发方式，需要通过一个集合js的文件，将其他各个的js文件模块，进行集中引入。（参考了博客1和博客2）

我就新建了一个blocklyTools.js文件将那些分散的.js文件引用进去

再将新建的blocklyTools.js写到入口文件处，最后连同main.js编译成一个build.js文件：

最终webpack.config.js的配置内容如下：

const path = require('path') // 引用path模块
const HtmlWebpackPlugin = require("html-webpack-plugin")
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {  // 这里是commrnt.js语法
 // 入口文件
 entry:["./src/main.js","./src/blocklyTools.js"],
 // 打包后的出口文件
 output:{
     // 输出的路径  是绝对路径(导入path模块) 这里是用node来做的
     path:path.resolve(__dirname,'build'),
     // 输出的文件名称
     filename:'build.js',
 },
 mode:"development",
 module: {
     rules: [
       { test: /\.vue$/, use: 'vue-loader' },
       { test: /\.css$/, use: ['style-loader','css-loader'] },
       {
           // 处理图片资源
         test: /\.jpg|png|gif$/,
         // 只使用一个loader处理，写法如下：
         // 下载 url-loader 和 file-loader
         loader:'url-loader',
         // loader的配置可以通过option来配置
         options: {
           // 图片大小小于12kb，就会base64处理
           // 通常我们只会对8-12kb以下的图片进行base64处理
           // 优点：减少请求数量（减轻服务器压力）
           // 缺点：图片体积会更大（文件请求速度更慢）
           limit: 12 * 1024
         }
       },
     ],
 },
 plugins:[
       new VueLoaderPlugin(),
       new HtmlWebpackPlugin({
           template: path.resolve(__dirname, './public/index.html')
       })
 ],
}

终于完结，撒花！！！！！！！！！！！！！！！！！！！！！！