webpack 打包

已有项目中集成webpack

npm install -D webpack webpack-cli

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"
}

package.json

build:webpack

配置相关的loader

vue-loader:解析 .vue文件
//webpack.config.js 中配置
module.exports = {
  module: {
    rules: [
      { test: /\.vue$/, use: 'vue-loader' },
    ],
  },
};

插件配置
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    //...
    plugins:[
          new VueLoaderPlugin(),
    ]
    //...
}
vue-loader@15.*之后除了必须带有VueLoaderPlugin 之外，还需另外单独配置css-loader。
css-loader 
module.exports = {
    module: {
        rules: [
          { test: /\.css$/, use: ['style-loader','css-loader'] },
        ],
    },
}

解析html
const HtmlWebpackPlugin = require("html-webpack-plugin")
plugins:[
          new HtmlWebpackPlugin({
              template: path.resolve(__dirname, './public/index.html')
          })
    ],

图片资源打包 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
            }
          }

多个js文件打包成一个文件
 entry:["./src/main.js","./src/blocklyTools.js"],