使用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",
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2675
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2727
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3225
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2627
来自专栏ASP.NETCore

ASP.NET Core 整合Autofac和Castle实现自动AOP拦截

除了ASP.NETCore自带的IOC容器外,我们还可以使用其他成熟的DI框架,如Autofac,StructureMap等(笔者只用过Unity,Ninjec...

684
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4055
来自专栏java 成神之路

使用 NIO 实现 echo 服务器

4787
来自专栏Golang语言社区

【Golang语言社区】GO1.9 map并发安全测试

var m sync.Map //全局 func maintest() { // 第一个 YongHuomap := make(map[st...

4828
来自专栏杨龙飞前端

scrollto 到指定位置

2544
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4878

扫码关注云+社区