preface

I believe there are many students like me, when learning VUE, they often build the front-end project of VUE through VUE-CLI / @vue/ CLI. Although this scaffold is very convenient and powerful, it is necessary for a front-end person to learn to build a project by himself through Webpack. Some time ago, I encountered some problems in learning the construction process practice, and I happened to see that there are few articles about Webpack + Vue + TS on nuggets, so I write down my own construction process here, and welcome your reference and comments.

⚡ Content Overview ⚡

  • Webpack basis
  • Vue + TS
  • Vue + TS + Webpack configuration process
  • Project Practice Results

Webpack basis

Webpack is a static module packaging tool for javascript applications. It can be viewed as a module packer, and what it does is it analyzes our project structure, builds a dependency map, maps each module that the project needs, and packages it into one or more bundles for the browser to use.

There are a lot of basics to Webpack, but here are the four concepts we need to understand first:

  • Entry
  • Output = output
  • Loader (webpack can only understand JS and JSON files)
  • Plugin (extension of Webpack capabilities, such as package optimization, resource management, injection of environment variables)

Specific tutorial: Webpack concept is very clear, in the WebPack configuration project, this knowledge is essential.

Vue + TS

  • The file name ending in js is changed to ts

  • Tsconfig. Json file

The tsconfig.json file specifies the root file and compilation options used to compile this project. Simply specify the configuration file for TS compilation.

  • Ts to identify vue

Ts does not recognize *. Vue files by default, so we need to declare the.d.ts declaration file of vue to tell TS what to do with *. Vue files.

  • Vue writing changes

Vue combined with TS writing method mainly changed in script part, the specific use method:A brief introduction to vue-property-decoratorThis article.

Vue + TS + Webpack configuration process

  • Initialize the project

Initialize the project and install the packages it depends on:

NPM init or NPM init -y // install dependencies NPM I vue vue-class-component vue-property-decorator -s NPM I webpack webpack-cli typescript ts-loader vue-loader -dCopy the code
  • Webpack configuration

Create a webpack folder and create webpack.base.conf.js (the basic webPack configuration file).

Configuration entry Starting point:

entry: path.resolve(__dirname, '.. /src/index.ts')
Copy the code

Configuration output (location, naming) :

output: {
      publicPath: ". /".path: path.resolve(__dirname, ".."."dist"),
      filename: "[name].[chunkhash:5].bundle.js".chunkFilename: "[name].[chunkhash:5].chunk.js",}Copy the code

The resolve configuration tells Webpack to find and resolve these suffixes in a certain order:

resolve: {
      extensions: [ '.tsx'.'.ts'.'.js'.'.vue'.'.json']}Copy the code

Configure module.rules to tell WebPack how to handle other types of files and convert them into valid modules for use by applications and to be added to dependency diagrams (here are some loaders that have not been installed before) :

module: {
  rules: [{test: /\.vue$/,
      use: [
        "vue-loader"] {},test: /\.tsx? $/,
      exclude: /node_modules/,
      use: [
        {
          loader: "ts-loader".options: {
            appendTsSuffixTo: [/\.vue$/].appendTsxSuffixTo: [/\.vue$/].transpileOnly: true,}}]}, {test: /\.js? $/,
      exclude: /node_modules/,
      use: [
        {
          loader: "babel-loader",}]}, {test: /\.css$/,
      use: [
        "style-loader"."css-loader"] {},test: /\.(png|jpg|jpeg|gif|svg)$/,
      use: [
        {
          loader: "url-loader".options: {
            name: "[name].[chunkhash:5].[ext]".limit: 1024 * 10.esModule: false}}]}, {test: /\.html? $/,
      use: [
        {
          loader: 'html-loader'}]}]}Copy the code

Configure plugins to dynamically introduce packaged external resources to HTML (link) and VueLoaderPlugin (vuE-loader 15 update: this plugin is required to be used correctly) :

plugins: [
      new HtmlWebpackPlugin({
        filename: "index.html".favicon: path.resolve(__dirname, '.. /src/favicon.ico'),
        template: path.resolve(__dirname, ".. /src/index.html"),
        minify: {
          collapseWhitespace: true}}),new VueLoaderPlugin()
    ]
Copy the code

Devserver configuration makes it easier for us to develop projects locally:

devServer: {
  host: '0.0.0.0'.port: 8002
}
Copy the code

Package. json:

"scripts": {
  "dev": "webpack serve --config webpack/webpack.base.conf.js"
},
Copy the code

Run NPM run dev in terminal:As you can see, our project is already running, but one warning is that mode is not set in webPack configuration. We usually distinguish between development environment and production environment, and make different configurations, such as devServer configuration just can not be used in production environment. The configuration of webpack development environment and production environment will be explained in more detail in future advanced articles. First set mode=”development”.

Rerun NPM run dev:

Project Practice Results

Open your browser and typehttp://localhost:8000/ The project can be accessed normally. We actually the webpack configuration and there are many problems, such as no distinction between development and production environment, without hot update, no optimization, there are other types of files without loader, far cannot meet the demand of complex projects, there is plenty of room to improve, study hard, to write better.