使用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 条评论
登录 后参与评论

相关文章

来自专栏ChaMd5安全团队

文件上传漏洞的一些总结

0x00 前言 在跟p猫的py交易后,写下了这篇文章,根据之前写文章后表哥给予的一些改进建议,尽量在这篇文章中写得更加详细。因为本人技术水平有限菜的要死,所以...

3466
来自专栏自动化测试实战

《selenium2 python 自动化测试实战》(17)——几个cookies操作

3214
来自专栏前端之路

VSCode安装与配置

1224
来自专栏极客生活

从零开始用Vue+Flask开发知乎小视频下载工具

作为一个几乎从来没做过前端开发的程序员,我近期花了一个周从零开始学习Vue的知识,做了一个知乎小视频的下载Demo,并且成功部署到线上。

681
来自专栏全华班

分享一套别人开发的网站管理后台系统

该项目的架构搭建使用的是maven,后台是使用的是ssm框架,权限管理使用的是shiro框架,前端使用的框架是layui,流程使用的activiti框架,集成了...

902
来自专栏张戈的专栏

一行代码彻底禁用WordPress缩略图自动裁剪功能

记得在博客分享七牛缩略图教程的时候,提到过 WordPress 默认会将上传的图片裁剪成多个,不但占用磁盘空间,也会拖慢网站性能,相当闹心! 当时也提到了解决办...

3406
来自专栏互联网杂技

入门webpack(下)

插件(Plugins) 插件(Plugins)是用来拓展Webpack功能的,它们会在整个构建过程中生效,执行相关的任务。 Loaders和Plugins常常被...

3196
来自专栏Dawnzhang的开发者手册

你真的了解博客园的目录么。。

非常感谢这位盆友能发现这个问题,奖励鸡腿,这是那篇博文:要嫁就嫁程序员,因为。。。

1044
来自专栏信安之路

绕过应用程序白名单技巧

在内网渗透中,经常会在内网主机执行执行的渗透工具的时候出现执行不起来的情况,很多时候是由与安全软件做了白名单限制,只允许指定的白名单中的应用程序启动,这时我们就...

660
来自专栏一个番茄说

Cordova插件开发——滑动手势解锁(iOS篇)

第一次正儿八经的参与Cordova的项目,想写下些文字,以便日后需要的时候能够帮助自己快速回忆起来,同时也希望能够帮到需要的朋友。

671

扫码关注云+社区