webpack打包命令（vuewebpack打包json文件访问地址不对）

本文目录

• vuewebpack打包json文件访问地址不对
• webpack配置
• webpack下载包命令&常用命令
• webpack打包第三方类库
• webpack打包优化怎么做（提升webpack打包速度）
• webpack 解决依赖,重复打包的问题
• webpack打包vue项目，可修改配置文件

vuewebpack打包json文件访问地址不对

vuewebpack打包json文件访问地址不对可以通过查看命令解决。根据查询相关资料信息，具体操作步骤为：
1、查看package.json文件的scripts命令。
2、打开webpack.dev.conf.js文件，找到publicPath：config.dev.assetsPublicPath，按Ctrl点击，跳转到index.js文件。
3、其中dev是开发环境，build是构建版本，找到build下面的assetsPublicPath修改为assetsPublicPath。
4、终端运行npmrunbuild即可。

webpack配置

一个打包工具

npm install --save-dev webpack : 安装Webpack
npm install webpack webpack-cli --save-dev :此工具用于在命令行中运行 webpack

webpack 开箱即用，可以无需使用任何配置文件。webpack 会假定项目的入口起点为 src/index.js ，然后会在 dist/main.js 输出结果，并且在生产环境开启压缩和优化。
在package.json文件中添加命令，然后通过npm run build即可运行打包

但是通常项目还需要继续扩展此能力，为此可以在项目根目录下创建一个 webpack.config.js 文件，然后 webpack 会自动使用它。

也可以根据特定情况使用不同的配置文件，则可以通过在命令行中使用 --config flag 修改此配置文件名称。

每个html页面都有一个入口点，单页面应用：一个入口起点；多页面应用：多个入口起点

mode?: "development" | "production" | "none";
。。。。。

（webpack 提供合理的默认值，但是还是可能会修改一些解析的细节）

条件的输入值由两种，

在条件中，对 resource 进行匹配的属性有 test / include / exclude / resource

在条件中，对 issuer 进行匹配的属性有 issuer

注：当使用多个条件属性时，需要同时满足，当属性条件为数组时，满足数据中的一个即可

可以对匹配规则的模块进行 应用loader 或者 解析选项对象

oneOf?: RuleSetRule;
rules?: RuleSetRule;

webpack配置示例：

webpack下载包命令&常用命令

cmd全局安装webpack。-g:全局安装

cmd全局安装webpack-cli包

(1).直接打包在根路径下

(2).超过大小的图片打包在根路径下面.否则直接打包在js文件中.

webpack打包第三方类库

技术胖webpack教程
webpack中使用echarts

在 webpack 的入口文件中直接引入第三方类库,向外全局暴露，以 jquery 插件使用为例

1.创建本地项目 webpack-demo

2.在 webpack-demo 的根目录下创建 package.json 文件

模块说明：

4.修改 package.json 文件的 scripts 属性值,进行打包资源的配置

5.安装相关的 loader

6.安装jquery

7.在入口文件 app.js 中引入 jquery

8.给按钮绑定事件

9.运行命令

10.结果展示

通过 webpack 的 ProvidePlugin 插件全局引入第三方类库,以 echats 使用为例

1 ~ 5步同上
6.安装echarts

7.在webpack.config.js中进行配置

7.创建echart容器

8.初始化echarts

9.运行命令

10.结果展示

webpack打包优化怎么做（提升webpack打包速度）

很多用Vue开发的项目中，都会遇到首屏加载慢，chunk-vendor.js动不动就好几MB，那么如何通过Vue的内部配置去优化我们的Vue项目呢?这是手头的一个项目，同样的源码，同样的服务器，打开了Disablecache，目前完全加载是6.82秒
优化后，加载时间才2.59秒，提升了60%的加载
其实出发点还是比较好理解的，压缩js和使用CDN因为我这边用的Linux服务器，然后安装的宝塔，使用的Nginx，默认是开启了Gzip，所以我们可以先安装compression-webpack-pluginyarnaddcompression-webpack-plugin或者npminstallcompression-webpack-plugin
然后，我们在vue.config.js中做如下的配置constCompressionWebpackPlugin=requiremodule.exports={productionSourceMap:false,configureWebpack:config={if{//开启gzip压缩config.plugins.push)}}}
这样，Gzip就可以在打包的时候生成了，如下图，打包前后体积还是很明显的，但是这样是不够的
为了防止文件过大，我们先把公共代码分离config.optimization={runtimeChunk:single,splitChunks:{chunks:all,maxInitialRequests:Infinity,minSize:20000,cacheGroups:{vendor:{test:/node_modules/,name{constpackageName=module.context.match/)return`npm.${packageName.replace}`}}}}}
打包后的效果，如下图
那么，在最后就是用CDN这里就引入一个vue.js作为例子config.externals={vue:Vue}
需要在你的public/index.html的body标签中引用对应版本的vue.js
然后整体打包，ok，附上完整的vue.config.jsconstpath=requireconstCompressionWebpackPlugin=requireconstappname=indexfunctionresolve{returnpath.join}constisProduction=process.env.NODE_ENV===production//vue.config.jsmodule.exports={productionSourceMap:false,outputDir:appname+OutPutFile,//运行时生成的生产环境构建文件的目录assetsDir:appname+public,//放置生成的静态资源的目录indexPath:appname+.html,//指定生成的index.html的输出路径也可以是一个绝对路径。configureWebpack:config={if{//开启gzip压缩config.plugins.push)config.optimization={runtimeChunk:single,splitChunks:{chunks:all,maxInitialRequests:Infinity,minSize:20000,cacheGroups:{vendor:{test:/node_modules/,name{constpackageName=module.context.match/)return`npm.${packageName.replace}`}}}}}config.performance={hints:warning,//入口起点的最大体积maxEntrypointSize:50000000,//生成文件的最大体积maxAssetSize:30000000,//只给出js文件的性能提示assetFilter:function{returnassetFilename.endsWith}}config.externals={vue:Vue}}},chainWebpack:={config.resolve.alias.set).set).set).set).set).set).set)},css:{},lintOnSave:undefined}
最后的一点建议，如果条件允许，能走cdn尽量走cdn，效果还是比较惊人的。

webpack 解决依赖,重复打包的问题

或者在 vue.config里面可以使用 chainWebpack链式配置方式去配置
关于chainWebpack与configureWebpack 可以看我之前写的文章， 传送门

运行打包命令之后就会打开一个可视化页面。如下图

左侧有个侧边栏显示打包的依赖，可以看到打包后每个chunk的大小。以及开启gzip压缩后大小比较等

从图中我们可以看到md5.js这个依赖被打包在了三个模块里面，左侧搜索输入md5，右边会跟着变红色。

根据各方的查找说解决这个重复打包的问题只需要 配置一个路径别名。就会强制引入同一个路径的文件，按道理来说也是这样。

可是最终却怎么也不行，就算配置了路径别名还是重复打包了依赖。怎么也想不明白。最后打开npm关于md5.js这个插件，如下图：

可以发现他这个插件的引入方式只支持 CommonJS 引入方式，并不支持es6 module 的引入方式。提到这个就要提提 CommonJS跟ES6 module的模块化的区别了
CommonJs 和 ES6 Module 的区别

所以可以发现 CommonJs导出的是变量的一份拷贝。这就知道为什么我们配置了路径别名还是会重复打包了，哪里有引入他就会拷贝一份。所以哪里用到了就会打包多少份。

那怎么办?难道没办法了吗？
天无绝人之路，此时其实可以使用 dll打包方式，将他打包到一个dll.js里面。因为md5这个库是不怎么变化的。而且都是公用的。

如下是dll打包配置

可以看到我们已经将md5也一起打包进dll里面了。

我们来看看打包分析工具生成的视图

解决依赖重复打包的问题有三种方式

1.配置路径别名，强制使用统一路径(前提是这个依赖必须支持es6 module引入方式。不然也只是拷贝)

第三种cdn方式后面我会专门写一篇文章来介绍
文章传送门

webpack打包vue项目，可修改配置文件

vue项目打包完成后，如需改变配置文件中的信息，比如域名修改（如下图config.js），是不可能在配置文件中直接更改的，因为配置文件是前端写死的，这时只能手动更改项目中的配置，然后重新打包npm run build 
var packConfig = require(’../src/config’)//引入原配置文件

var GenerateAssetPlugin = require(’generate-asset-webpack-plugin’)//引入插件

var createServerConfig = function(compilation){//声明转换函数，将对象转为json字符串

  return JSON.stringify(packConfig)

}

plugins里添加

new GenerateAssetPlugin({//生成文件，并添加入内容

        filename: ’config.json’,

        fn: (compilation, cb) =》 {

            cb(null, createServerConfig(compilation));

        },

        extraFiles:

    })
import axios from ’axios’//引入一个ajax封装工具

import storage from ’services/storage’//引入对缓存操作的封装工具

var getConfigJson = function () {

  //声明一个函数，用来读取json文件并将其内容存入缓存

    axios.get(’config.json’).then((result) =》 {

  //读取文件

storage.setItem(’config’, result.data)

    }).catch((error) =》 {

console.log(error)

  })

}