I played webpack again

Introduction: Since vuE2 was used to vuE-CLI in the early version, I have never manually configured the vUE development environment. Today, I explored the configuration of the Vue Webpack development environment again

Version tool Vue3 + WebPack5

• Webpack installationnpm i webpack webpack-cli webpack-dev-server

Webpack configuration – CSS

Import file configuration:

• Ask why in a WebPack configurationentry:'./src/index.js'/ SRC /index.js, not another path?

1. CSS configuration

• NPM I style-loader CSS-loader

• Style-loader is used to package CSS and insert it into the page using the style tag

• Css-loader mainly processes the path imported by url @import

   module: {
     rules: [{test: /\.css$/,
         use: ['style-loader'.'css-loader']]}}Copy the code

2. Less configuration:npm i postcss-loader postcss-preset-env less less-loader

- less-loader Is used to process webpack. Less files are processed by less. - postcss-loader Configures prefixes for advanced CSS features in different browsersCopy the code

  module: {
    rules: [{test: /\.less$/,
        use: ['style-loader', 
        {
          loader: 'css-loader'.options: {
            importLoaders: 2.// The less file used to configure the @import import is processed recursively again}}'postcss-loader'.'less-loader']]}}// postcss.config.js
 
   module.exports = {
     plugins: [
       'postcss-preset-env']}Copy the code

Webpack configuration – image

• Image file processing:npm i file-loader url-loader
• File-loader handles image paths and copies files from one file to another
• By default, url-loader will process bese64 images and not generate image files. Configure options.limited to determine whether to convert to Base64 or generate images based on the value

 module: {
     rules: [{test: /\.(png|jpe? g|svg|gif|webp)$/,
         use: [
           loader: 'file-loader'Is just a copy of the pathoptions: {
             outputPath: 'images'.filename: '[name].[hash:8].[ext]'
             / / or
             name: 'images/[name].[hash:8].[ext]'}},/ / url - loader configuration
        {
         test: /\.(png|jpe? g|svg|gif|webp)$/,
         use: [
           loader: 'url-loader'Base64 is generated by defaultoptions: {
             limit: 10 * 1024.// 10k
             outputPath: 'images'.filename: '[name].[hash:8].[ext]'
             / / or
             name: 'images/[name].[hash:8].[ext]',}},// WebPack5 built-in asset configuration
       {
         test: /\.(png|jpe? g|svg|gif|webp)$/,
         type: 'asset/resource'.// === file-loader
         generator: {
           filename: 'images/[name].[hash:8][ext]' // the suffix ext is included.}}, {test: /\.(png|jpe? g|svg|gif|webp)$/,
         type: 'asset'.// === url-loader
         generator: {
           filename: 'images/[name].[hash:8][ext]' // the suffix ext is included.
         },
         parser: {
           dataUrlCondition: { // Set the constraint
             maxSize: 10 * 1024}}}]}Copy the code

Webpack Configuration – Font icon

• Font icon Settings are mainly used to move the font file path – file-loader

    {
        test: /\.(ttf|woff2? |eot)$/,
        use: {
          loader:'file-loader'.options: {
            name: 'fonts/[name].[hash:8].[ext]'}}},Copy the code

Webpack configuration – JavaScript

• Js high-level syntax conversionnpm i babel-loader @babel/core @babel/preset-env
  • babel-loader
  • @babel/core contains the core package for the Babel transformation
  • @babel/preset-env preset (set of plug-ins), contains presets like@babel/plugin-transform-arrow-functions,@babel/plugin-block-scopingA collection of plug-ins

     {
        test: /\.js$/,
        use: 'babel-loader'
      },
      
      / / the Babel. Config. Js configuration
       module.exports = {
         presets: [
           '@babel/preset-env']}Copy the code

Webpack configuration – vue

• Vue template file configuration:npm i vue-loader vue@next @vue/compiler-sfc vueLoaderPlugin
• Vue-loader is used to process files ending in. Vue for Webpack
• vue@next installs the runtime version of vue3.js by default
• @vue/ Compiler-sFC Used to process vUE files of single-file components compilers are equivalent to vue2 versions of the VUE-template-Compiler plug-in
• vueLoaderPlugin

   {
     test: /\.vue/,
     use: 'vue-loader'
   },
   plugins: [
     new VueLoaderPlugin()
   ]
Copy the code

• Runtime + Compiler and Run-time only for VUE
  1. Runtime + Compiler contains the processing of templete, and the conversion process from template to render function is completed by the Compiler, including runtime and Compiler two core files. You need to use @vue/ Compiler-SFC for template processing
  2. Runtime-only: does not include the escape of template and generates the virtual DOM node directly from the render function
  3. Vue-loader Compiles single files Vue-loader has built-in functions of escaping. Vue files and hot updating.

Webpack environment configuration