使用webpack打包vue工程

记得去年十月份的时候，自己在研究webpack，当时只是知道大致的用法，写了一个简单的demo，现在，经过了7个月对公司产品架构的使用，以及对vue-cli的使用，在了解了实际应用中各种需求之后，我自己写了一套适合开发的vue-cli

为了满足业务需要我这里配置了四套环境，打包的时候可以自己根据不同的业务场景进行打包

首先看整体目录结构：

package.json里是各种依赖，build是四套webpack要读取的config，static是要复制到dist下的配置文件，四套环境的api都保存在这里。

index.html是一个单页程序的模版，也会打包到dist里，并且会把打包后的js，css，动态加载到index.html里

代码如下

package.json

{

  "name": "vue-demo",

  "version": "1.0.0",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "dev": "webpack --config build/webpack.dev.config.js|webpack-dev-server --config build/webpack.dev.config.js  --color  --progress",

    "build": "webpack --config build/webpack.dev.config.js",

    "build-dev": "webpack --config build/webpack.dev.config.js",

    "build-test": "webpack --config build/webpack.test.config.js",

    "build-yufa": "webpack --config build/webpack.yufa.config.js",

    "build-online": "webpack --config build/webpack.online.config.js"

  },

  "author": "",

  "license": "ISC",

  "description": "",

  "dependencies": {

    "babel-core": "^6.23.1",

    "babel-loader": "^6.4.0",

    "babel-plugin-transform-runtime": "^6.23.0",

    "babel-preset-es2015": "^6.22.0",

    "babel-runtime": "^5.8.38",

    "css-loader": "^0.26.4",

    "extract-text-webpack-plugin": "^3.0.2",

    "file-loader": "^1.1.11",

    "html-loader": "^0.5.5",

    "style-loader": "^0.21.0",

    "url-loader": "^1.0.1",

    "vue-hot-reload-api": "^2.0.11",

    "vue-html-loader": "^1.2.4",

    "vue-loader": "^11.1.4",

    "vue-router": "^3.0.1",

    "vue-style-loader": "^2.0.3",

    "webpack": "^3.11.0",

    "webpack-dev-server": "^2.4.1"

  },

  "devDependencies": {

    "clean-webpack-plugin": "^0.1.19",

    "copy-webpack-plugin": "^4.5.1",

    "html-webpack-plugin": "^3.2.0",

    "vue": "^2.5.16",

    "vuex": "^3.0.1"

  }

}

webpack.dev.config.js

let path = require("path");//路径包

const HtmlWebpackPlugin = require('html-webpack-plugin');//打包html模版到dist文件夹下面

let ExtractTextPlugin = require('extract-text-webpack-plugin'); //将css文件单独打包

const CleanWebpackPlugin = require('clean-webpack-plugin');//每次打包之前会清除掉之前的包

let webpack=require("webpack");//打包

let CopyWebpackPlugin=require("copy-webpack-plugin")//拷贝配置文件到打包文件夹下

module.exports = {

  devtool: '#eval-source-map',//本地开发的时候可以快速定位到相关的位置

  entry: {

    bundle: './src/main.js',

    vendor: ['vue', 'vuex']

  },

  output: {

    path: path.resolve(__dirname, '../dist'),

    filename:'js/[name][chunkhash].js',

    // hashDigestLength: 8 // 默认长度是20

  },

  plugins: [

    new HtmlWebpackPlugin({

        filename: 'index.html',

        template: 'index.html',

        inject: true

      }),//打包html模版用的webpack插件，html-webpack-plugin

    new ExtractTextPlugin({

      filename: 'css/[name][chunkhash].css', //路径以及命名

    }),//打包css文件

    new CleanWebpackPlugin(['./*'],{

      root: path.resolve(__dirname, '../dist'),

      verbose: true,

      dry: false

    }),//在打包前，删掉dist下面的文件

    new webpack.optimize.CommonsChunkPlugin({

      name: 'manifest',

      chunks: ['bundle']

    }),//分离出业务代码和第三方代码，分别打包，vendor 代表第三方的插件

    new webpack.optimize.CommonsChunkPlugin({

      name: 'manifest',

      chunks: ['vendor']

    }),//分离出业务代码和第三方代码，分别打包，bundle 代表业务组件

    new CopyWebpackPlugin([{

      from: __dirname + '/../static/config',

      to:__dirname + '/../dist/config'

    }])

  ],

  devServer: {

    contentBase: path.join(__dirname, "dist"), //网站的根目录为 根目录/dist，如果配置不对，会报Cannot GET /错误

    port: 9000, //端口改为9000

    open:true // 自动打开浏览器，适合懒人

  },

  resolve: {

    alias: {

      'vue$': 'vue/dist/vue.common.js',

      '@': path.resolve('src')

    },

  },

  module: {

    rules: [

        {

          test: /\.css$/,

          use: ExtractTextPlugin.extract({

            fallback: "style-loader",

            use: "css-loader"

          }),

          include: [

            path.resolve(__dirname, "../src"),

          ],

          exclude: /node_modules/

        },

        {

          test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,

          loader: "url-loader?limit=1&name=images/[name].[ext]",

          include: [

            path.resolve(__dirname, "../src"),

          ],

          exclude: /node_modules/

        },

        // {

        //   test: /\.lhtml$/,

        //   loader: path.resolve(__dirname, "../loaders/lhtml.js"),

        // },

        {

          test: /\.js$/,

          loader: 'babel-loader',

          exclude: /node_modules/

        },

        {

          test: /\.html$/,

          loader: 'html-loader',

          exclude: /node_modules/

        },

        {

          test: /\.vue$/,

          loader: 'vue-loader',

          include: [

            path.resolve(__dirname, "../src"),

          ],

          exclude: /node_modules/

        }

      ]

  }

}

dist文件夹

index.html模版

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Webpack App</title>

  </head>

  <body>

    <div id="app">

    </div>

    <script type="text/javascript" src='./config/index.js'></script>

  </body>

</html>

index.html打包后

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Webpack App</title>

  <link href="css/bundlea98c13aa08e803c80c32.css" rel="stylesheet"></head>

  <body>

    <div id="app">

    </div>

    <script type="text/javascript" src='./config/index.js'></script>

  <script type="text/javascript" src="js/manifestec61393171da3bb83c2f.js"></script><script type="text/javascript" src="js/bundlea98c13aa08e803c80c32.js"></script><script type="text/javascript" src="js/vendorf1a0697505d33ae0d2ec.js"></script></body>

</html>

config/index.js

var urlconfig={

  api:"http://dev.windseek.com",

}

我的博客即将搬运同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=14hortl96o1yt

巴特西

使用webpack打包vue工程

最新文章

热门文章