webpack4-vue-ts

issues

• less scss 里面不能用别名 只能用相对路径引用其他样式表 (Webpack 会将以 ~ 符号作为前缀的路径视作依赖模块而去解析, 还是有问题)
• template lang="html" 会报错 可以使用lang="pug/jade"

特别说明

不支持stylus

因stylus-loader已不维护，vue-loader无法与其兼容,因此本中间件不支持stylus。

使用说明

1.检查package.json

检查package.json,如本中间件已引用的，如babel-polyfill等，项目不要再引用。

不要使用@types/vue，@types/vue已被废弃，VUE已支持ts，使用@types/vue会与VUE发生冲突。

2.检查index.js

以下说明针对index.js中配置。可参考demo文件夹中相应配置，使用时，注意配置填写正确。

① " build: build/projectName/${version} "，build目录需要写${version}，否则build时无法找到目录。

②const webpackBuild = require("webpack4-vue-ts");

③ 如需开启打包分析，可在index.js里配置bundleAnalyzerReport。如不使用，可忽略本条

bundleAnalyzerReport: true, // build模式下是否开启打包分析报告，默认为false。

bundleAnalyzerReportPort:8788 // 打包分析报告端口，默认为8787，仅在bundleAnalyzerReport为true时生效。`

3.检查.babelrc

因 babel-preset-es2015，年份系列已废弃，请将.babelrc 文件中“es2015”等修改“env”。

生成文件介绍

manifest为“webpack运行时”代码

vendor为抽离的node_modules组件代码

common为抽离的模块公用代码

当抽离后文件自身过小时，可能不生成该文件。

版本更新说明

通常1.X版本是新功能 1.X.X是修复bug版本。

• 1.12.3

  1.jade / pug 合并， 增加音频和视频loader 1.精简不必要的依赖。 1.精简开发环境下输出信息，仅在错误和新编译时输出信息。 1.vue-loader依赖的vue和vue-template-compiler版本不匹配问题升级 1.针对大家“build输出信息过多，jenkins中没有颜色标识，不容易查找报错”的反馈，build输出精简，只输出错误信息。 1.修复1.10.5导致css压缩产生map的问题 1.增加serve模式：对build后的文件开启http服务和反向代理（index.js） 1.增加对sass导入文件去重的功能，使用了node-sass-import-once包 2.打包样式压缩功能，使用了optimize-css-assets-webpack-plugin包 1.修复文件名前缀相同引起的bug 1.增加对H5与PC分类项目的支持 1.调整vue-loader和vue-template-compiler版本。 2.升级cssnano 3.X为4.X 1.修复webpack-bundle-analyzer引起的bug。 2.增加对pug的支持 3.针对依赖中ES6代码未正常转化的问题,uglifyjs-webpack-plugin更换为terser-webpack-plugin 4.固定版本号 1.增加是否打包分析报告配置项，增加webpack-bundle-analyzer。 1.优化代码，升级loader，去除2个过期API警告（①compiler.apply ② parseQuery()） 2.优化build时进度条，增加progress-bar-webpack-plugin。 3.去除build时时间戳后缀。 1.已由webpack2升级为webpack4（参考“升级说明”部分）。部分警告暂未处理，将在下个版本修复。

webpack 2→4 升级说明

1. 版本替换

移除webpack2，增加webpack4。

2. JS打包与抽离

移除CommonsChunkPlugin，升级为splitChunksPlugin && runtimeChunkPlugin。

移除：（dev和prod各三处，同理）

new webpack.optimize.CommonsChunkPlugin({ //提取公用的代码打包到独立文件
          name: 'h5/common-h5',
          chunks: chunks,
          // Modules must be shared between all entries
          minChunks: chunks.length // 提取所有chunks共同依赖的模块
        })

新增SplitChunksPlugin：（dev和prod各三处，同理）

new webpack.optimize.SplitChunksPlugin({ //提取公用的代码打包到独立文件
    cacheGroups: {
        commons: {
            chunks: "initial", // initial(初始块)、async(按需加载块)、all(全部块)，默认为all;
            name:'common',
            maxInitialRequests: 5, // 最大的初始化加载次数，默认为1；
            minSize: 0, // 在压缩前的最小模块大小
            minChunks: chunks.length
        },
        vendor: {
            test: /node_modules/,
            chunks: "initial",
            name: "vendor",
            priority: 10, // 缓存优先级
            enforce: true,
            minChunks: chunks.length
        }
    }
})

新增RuntimeChunkPlugin一处：

new webpack.optimize.RuntimeChunkPlugin({
  name: "manifest"  // 分离 “webpack运行时”打包
}),

3.JS压缩

webpack4不自带UglifyJsPlugin，推荐使用内置的minimizer ，但无法自定义。

因此使用非自带插件 uglifyjs-webpack-plugin。

文档：https://github.com/webpack-contrib/uglifyjs-webpack-plugin

中文：https://webpack.css88.com/plugins/uglifyjs-webpack-plugin.html

同时移除"webpack-parallel-uglify-plugin": "^1.0.1", 并发压缩插件。

移除：

var  UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

webpackConfig.plugins.push(new UglifyJsPlugin({
  compress: {
    warnings: false,
    drop_console: true
  }
}));

安装： npm install --save uglifyjs-webpack-plugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

optimization: {
  minimizer: [
    new UglifyJsPlugin({
      uglifyOptions:{
        compress: {
          warnings: false,
          drop_console: true
        }
      }
    })
  ]
}

4.CSS合并

卸载 extract-text-webpack-plugin

安装 npm install --save mini-css-extract-plugin

例子：

css:[
  MiniCssExtractPlugin.loader,
  {
    loader: "css-loader",
    options: {
      importLoaders: 1
    }
  },
  {
    loader: "postcss-loader"
  }
],

5.chunkFilename

因webpack4下打包时文件名未达预期(暂未找到原因)，，移除webpack.config.base的chunkFilename属性。

6.更换已废弃的babel

npm uninstall --save babel-preset-es2015
npm install --save babel-preset-env

将 .babelrc 文件中“es2015”修改“env”.

7.升级组件

升级部分组件，如：

html-webpack-plugin@2.3.1升级到3.2

webpack-dev-middleware@1.12.2升级到3.5.0

原文档

该中间件使用webpack2对项目进行构建，中间件统一管理了项目开发中大概95%以上的构建配置。使用该中间件对项目构建时，中间件在运行的时候会自动合并项目中的webpack.config.js(构建项目必须存在此文件)文件，然后再进行项目的构建。

freedom-middleware-webpack2构建中间件支持构建的项目

• 使用less、sass、ts、vue、ejs,jade以及es6开发的项目
• 中间件生成的webpack.config.js允许开发者根据项目需要自行扩展项目的构建配置或者覆盖中间件本身的配置
• 中间件生成的.babelrc文件允许开发者自行定义babel相关构建配置
• 中间件生成的tsconfig.json允许开发者自行定义ts编译选项
• postcss.config.js允许开发者自行定义样式处理方式

freedom-middleware-webpack2构建中间件使用

var webpackBuild = require("freedom-middleware-webpack2");
(async function () {
  var params = {
    port: 9090,
    env: "dev",//环境变量，dev:开发环境；prod：生成环境
    entryDir:"entry",//编译入口目录，位于项目/根目录/src/scripts/entry
    publicPath: `//static.xxx.com/oneTomany/0.0.1`,
    build: `build`,//生产环境prod构建的资源存放的目录，在dev环境中该值忽略
    proxy: {
      context: ["/api", "/auth","/award"],
      options: {
        target: 'http://localhost:8080'
      }
    }
  };
  await webpackBuild(params);
})();

freedom-middleware-webpack2构建中间件的参数说明

{
  "root":"",//新增参数，根目录，不写默认为process.cwd()
  "port":"本地环境dev启动的端口后",
  "env":"环境变量，dev:开发环境；prod：生成环境",
  "entryDir":"entry",//webpack编译入口目录，可选参数，此参数不传，默认查找的编译入口为entry，编译入口的目录必须位于/根目录/src/scripts/这个目录下面
  "publicPath":"构建资源的替换路径，比如：css中的图片路径",
  "build":"生产环境prod构建的资源存放的目录，在dev环境中该值忽略",
  "proxy":{ //反向代理设置
    "context":["/api", "/auth","/award"],//要拦截的url
    "options":{ //设置代理端口
      "target": 'http://localhost:8080'	
    }
  }
}

dev环境下，文件编译的目录存储于根目录下的__build目录

备注

构建项目下必须要有webpack.config.js文件，配置(webpack的配置格式)如下:

module.exports = function () {
  var extendConf = {
    plugins: [
      
    ],
    resolve: {
     
    },
    module: {
      rules: [
        
      ]
    }
  };
  return extendConf;
};

项目目录

• 中间件对于项目结构做了约束，指定项目入口文件的目录必须位于/src/scripts/ 这个目录下面
• 相关代码放到/src/scripts下面(主要是约定了入口文件必须放到/src/scripts下面的某个目录里面，比如：/src/scripts/entry)

|-webpack2-demo
  |-src
    |-scripts
      |-entry