首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >使用webpack打包vue工程

使用webpack打包vue工程

作者头像
windseek
发布于 2018-06-15 08:39:29
发布于 2018-06-15 08:39:29
1.1K00
代码可运行
举报
文章被收录于专栏:杨龙飞前端杨龙飞前端
运行总次数:0
代码可运行

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

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

首先看整体目录结构:

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

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

代码如下

package.json

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
  "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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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模版

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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打包后

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var urlconfig={
  api:"http://dev.windseek.com",
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-05-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
webpack打包原理入门探究(五)css-loader初探
在 src/app.js 引入 src/styles/css/common.css
公众号---人生代码
2020/06/11
6100
webpack 基础知识整理
webpack是一个 模块打包工具,支持所有的打包语法,比如 ES Module、CommonJS、CMD、AMD。初期的webpack是用来模块打包js的,发展到现在,已经可以打包很多种文件类型,比如 css、img 。
神葳
2021/01/22
1.4K0
Vue学习-Webpack
从本质上来讲,webpack是一个现代的JavaScript应用的静态模块打包工具。
花猪
2022/02/17
1.4K0
Vue学习-Webpack
59.Vue 使用webpack构建vue项目
在前面的篇章中,已经说明了 webpack4 的基本使用,那么本章节开始在 webpack4 中构建vue项目,同时对比看看这种构建方式,与在网页script导入 vue.js 中的区别。
Devops海洋的渔夫
2020/08/20
2.7K0
59.Vue 使用webpack构建vue项目
vue-cli webpack2项目打包优化
减小文件搜索范围 配置 resolve.modules Webpack的resolve.modules配置模块库(即 node_modules)所在的位置,在 js 里出现 import 'vue' 这样不是相对、也不是绝对路径的写法时,会去 node_modules 目录下找。但是默认的配置,会采用向上递归搜索的方式去寻找,但通常项目目录里只有一个node_modules,且是在项目根目录,为了减少搜索范围,可以直接写明 node_modules 的全路径;同样,对于别名(`alias)的配置,亦当如此:
mcq
2018/06/20
1.4K0
10天从入门到精通Vue(五)Webpack打包
webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具;
共饮一杯无
2022/11/28
5680
10天从入门到精通Vue(五)Webpack打包
使用Webpack5创建Vue2项目及优化
之前我们大多都是用Vue-Cli来创建项目,但是Vue-Cli已经停止更新了,并且Vue-Cli相当于一堆插件的集合体,我们想替换以下,或者想根据我们的项目优化以下,提升编译的性能,这时候可以自己用Webpack来配置项目。
码客说
2022/09/27
3.2K0
使用Webpack5创建Vue2项目及优化
webpack 入门教程
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
老马
2018/08/20
4.3K0
webpack 入门教程
Webpack4 搭建 Vue 项目
由于 Parcel 打包工具的影响,webpack4 也追求零配置搭建项目。而前阵子出现的 vue-cli 3.0也是基于 webpack4 零配置的思想创建的。对于一些习惯webpack3 的开发者难免有些不习惯。本文就带你绕过 vue-cli,用 webpack4 一步步搭建 vue 项目。
小皮咖
2019/11/05
1.2K0
vue 学习笔记第四弹 - Webpack
webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具;
syy
2020/04/07
9700
从零开始学VUE之Webpack(JS打包压缩插件的使用)
可以看到JS已经被压缩了,但是存在一个问题,那就是版权声明没有了,还有注释都没有了,应为这就是压缩的一部分,这个和版权插件是冲突的
彼岸舞
2021/06/07
1.5K0
从零开始学VUE之Webpack(JS打包压缩插件的使用)
2022-webpack5实战教程
打包成功之后,查看dist目录下的index.html文件是否引用了打包之后的js
gogo2027
2022/10/17
1K0
手把手带你使用webpack4构建一个Vue开发编译环境,并实现代码分割,css代码分离
本篇文章不会细致讲webpack生产编译方面的优化操作,主要点是为了区分开发与生产环境的区别,代码分割分离的操作,所以不建议各位使用本篇文章内配置内容去进行生产编译,生产编译其它优化细节请各位自行另加配置,当然本篇文章配置也不是不能用作生产配置,只是给各位一个建议~
吴佳
2022/09/26
9310
pwa+webpack,初探与踩坑0.前言1.webpack2.pwa3.基于webpack的pwa
我们都知道pwa是一个新技术.,依靠缓存,离线了还能正常跑,而且秒开。我把以前原生写的小游戏迁移到react,再迁移到webpack+react,最后再升级到pwa。具体介绍不多说,我们开始撸吧。
lhyt
2018/10/31
7420
Vue 3 和 Webpack 5 来了,手动搭建的知识该更新了
前言 想必绝大多数用 Vue 开发过项目的同学,或多或少会有以下两种情况: 用 Vue CLI 工具去搭建一个项目。 在领导或同事搭建好的项目基础上做业务。 长此以往,会导致你对整个项目的把控度越来
Nealyang
2021/02/01
2K0
Vue 3 和 Webpack 5 来了,手动搭建的知识该更新了
从零开始学VUE之Webpack(Html打包插件的使用)
看到的错误大概是不能读取属性中的 initialize方法,是一个没有定义的,经过查看源码,发现在最新的版本中确实没有这个方法了,后来看了下老师的版本是3.2.0,我的是5.3.1
彼岸舞
2021/06/07
9240
从零开始学VUE之Webpack(Html打包插件的使用)
【学习笔记】尚硅谷Webpack5入门到原理 | 基础篇
需要注意的是 package.json 中 name 字段不能叫做 webpack, 否则下一步会报错
LonelySnowman
2023/01/17
2.4K0
【学习笔记】尚硅谷Webpack5入门到原理 | 基础篇
用 vite 2 平滑升级 vue 2 + webpack 项目实战
之前的 webpack 命令加前缀(如:"webpack:build"),继续可用
PHP开发工程师
2022/03/10
1.7K0
用 vite 2 平滑升级 vue 2 + webpack 项目实战
webpack4配置入门和进阶
webpack作为一个模块打包器,主要用于前端工程中的依赖梳理和模块打包,将我们开发的具有高可读性和可维护性的代码文件打包成浏览器可以识别并正常运行的压缩代码,主要包括样式文件处理成css,各种新式的JavaScript转换成浏览器认识的写法等,也是前端工程师进阶的不二法门,本文借鉴了部分vue-cli对webpack的配置思路,还有一些网上比较好的解决方案,在此对这些作者一并表示感谢。 webpack.config.js配置项简介 Entry:入口文件配置,Webpack 执行构建的第一步将从 Entry
卡少
2018/05/16
3.6K0
正确的Webpack配置姿势,快速启动各式框架!
在去年的这个时候,本骚年还在被Grunt和Gulp以及各种Requirejs、Seajs团团围住攻击,狼狈不堪。后面认识了Webpack之后,基本所有项目框架都拿它来构建了。
腾讯NEXT学位
2019/02/15
1.8K0
相关推荐
webpack打包原理入门探究(五)css-loader初探
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档