Since typescript requires webapck and other versions of typescript, this article covers webapck upgrades and typescript access separately

Github link: github.com/huisunyang/…

Webpack upgrade

The webpack version of the vuE-Cli2. x build project is upgraded to 4.x because the 3.x version does not support typescript

webpack
"webpack": "^ 3.6.0"= >"^ 4.29.6"
"webpack-bundle-analyzer": "^ 2.9.0"= >"^ 3.1.0"
"webpack-cli": "^ 3.3.0" (ADD)
"webpack-dev-server": "^ 2.9.1." "= >"^ 3.1.11"
"webpack-merge": "^ 4.1.0." "= >"^ 2"
Copy the code
loader
"css-loader": "^ 0.28.0"= >"^ 2.1.1"
"file-loader": "^ 1.1.4." "= >"^ 3.0.1." "
"postcss-loader": "^ mid-atlantic moved." "= >"^ 3.0.0"
"url-loader": "^ 0.5.8"= >"^ 1.1.2." "
"vue-loader": "^ 13.3.0"= >"^ 15.7.0"
"vue-style-loader": "^ 3.0.1." "= >"^ 4.1.2." "
"vue-template-compiler": "^ 2.5.2." "= >"^ 2.6.9." "
Copy the code
plugin
"copy-webpack-plugin": "^ 4.0.1." "= >"^ 5.0.1." "
"friendly-errors-webpack-plugin": "^ 1.6.1." "= >"^ 1.7.0"
"html-webpack-plugin": "^ 2.30.1"= >"^ 3.2.0"
"optimize-css-assets-webpack-plugin": "^ 3.2.0"= >"^ 5.0.1." "
"extract-text-webpack-plugin": "^ 3.0.0"  (DEL)
"mini-css-extract-plugin": "^ 0.5.0" (ADD)
Copy the code
eslint
"eslint": "^ 4.15.0"= >"^ 4.19.1"
"eslint-config-standard": "^ 10.2.1"= >"^ 11.0.0"
"eslint-friendly-formatter": "^ 3.0.0"= >"^ 4.0.1." "
"eslint-loader": "^ 1.7.1." "= >"^ 2.0.0." "
"eslint-plugin-import": "^ 2.7.0"= >"^ 2.12.0"
"eslint-plugin-node": "^ 5.2.0." "= >"^ the 6.0.1." "
"eslint-plugin-promise": "^ 3.4.0"= >"^ 3.7.0"
"eslint-plugin-standard": "^ 3.0.1." "= >"^ 3.1.0"
"eslint-plugin-vue": "^ 4.0.0"= >"^ 4.5.0." "
Copy the code
Configuration changes
webapck.base.conf.js
+  const { VueLoaderPlugin } = require('vue-loader')... plugins: [ + new VueLoaderPlugin() ...Copy the code
webpack.prod.conf.js
-  const ExtractTextPlugin = require('extract-text-webpack-plugin')
-  const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+  const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+  const { VueLoaderPlugin } = require('vue-loader')... const webpackConfig = merge(baseWebpackConfig, { ... + optimization: { minimize:true// Identify sideEffects in package.json to remove useless modules, Used for tree - shake / / is dependent on optimization. ProvidedExports and optimization usedExports sideEffects:true/ / replace new webpack. Optimize. ModuleConcatenationPlugin concatenateModules () :true/ / replace new webpack. NoEmitOnErrorsPlugin (), don't print resources while compilation errors. noEmitOnErrors:true,
      splitChunks: {
        cacheGroups: {
            vendors: {
              test: /[\\/]node_modules[\\/]/,
              chunks: 'initial',
              name: 'vendors',},'async-vendors': {
              test: /[\\/]node_modules[\\/]/,
              minChunks: 2,
              chunks: 'async',
              name: 'async-vendors'
            }
        },
      },
      runtimeChunk: { name: 'runtime' }
  },
   plugins: [
+   new VueLoaderPlugin(),
+   new MiniCssExtractPlugin({
+    filename: utils.assetsPath('css/[name].[contenthash].css'),
+    allChunks: true,
+  }),
-  new ExtractTextPlugin({
-    filename: utils.assetsPath('css/[name].[contenthash].css'),
-    allChunks: true,
-  }),
-  new UglifyJsPlugin({
-    uglifyOptions: {
-       compress: {
-         warnings: false-} -}, -sourceMap: config.build.productionSourceMap,
-   parallel: true
-  }),
-  new webpack.optimize.CommonsChunkPlugin({
-    name: 'vendor',
-    minChunks (module) {
-      return (
-        module.resource && 
-        /\.js$/.test(module.resource) && 
-        module.resource.indexOf(
-          path.join(__dirname, '.. /node_modules')
-        ) === 0
-      )
-    }
-  }),
-  new webpack.optimize.CommonsChunkPlugin({
-    name: 'manifest',
-    minChunks: Infinity
-  }),
-  new webpack.optimize.CommonsChunkPlugin({
-    name: 'app',
-    async: 'vendor-async',
-    children: true,
-    minChunks: 3
-  }),
Copy the code
util.js
- const ExtractTextPlugin = require('extract-text-webpack-plugin')
+ const MiniCssExtractPlugin = require('mini-css-extract-plugin')

  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    // if (options.extract) {
    //   return ExtractTextPlugin.extract({
    //     use: loaders,
    //     fallback: 'vue-style-loader'/ / / /}})else {
    //   return ['vue-style-loader'].concat(loaders)
    // }
+   return [
+     options.extract ? MiniCssExtractPlugin.loader : 'vue-style-loader',
+   ].concat(loaders)
+ }
Copy the code
Install babel-plugin to transform ES6 code
npm install babel-plugin-transform-es2015-modules-commonjs -D
Copy the code
Add the following to the. Babelrc file in the project root directory:
"plugins": ["transform-es2015-modules-commonjs"]
Copy the code

Typescript access

Installation-dependent dependencies

npm install typescript ts-loader vue-property-decorator vue-class-component -D
Copy the code
Modify webapck. Base. Conf. Js
module: {
  rules: [
    ...
    {
      test: /\.tsx? $/i, use: [{ loader:'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      }],
      exclude: /node_modules/
    },
    
    ...
Copy the code
Create the VUE declaration file
Create a shims-vue.d.ts file in the SRC directory. It doesn’t matter what name you call it, but it must end with.d.ts
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}
Copy the code
Create tsconfig. Json
Create the tsconfig.json file in the project root directory. This file can be created using the TSC command.
tsc --init
Copy the code
Replace js files with ts
src/App.vue
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class App extends Vue {
}
</script>
Copy the code
Change the js file to ts file such as main.js => mian
Modify the entry
module.exports = {
  entry: {
    app: './src/main.ts'}... }Copy the code

NPM run Dev will run successfully, and the project will plug into typescript