webpack的理解

webpack的简单使用

我们简单的用es6语法写一些js,首先我们要清除浏览器无法直接识别es6的模块化语法,需要我们先使用babel,然后使用browerfiy. 现在我们有了webpack可以直接使用webpack处理。

既然要使用,我们就先要安装webpack,正常我们是直接在项目里面安装,这里我先全局安装了。

// 这里一定要注意webpack是4版本,webpack-cli是3版本,是因为webpack-cli是后面才推出的。
 npm i -g webpack@4 webpack-cli@3
 
// 安装好以后直接用这行命令  -o就是输出的意思  
 webpack ./src/js/app.js -o ./build/js/app.js --mode=development

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

<!-- webpack-cli相当于明星的经纪人,不能直接跟明星对接 -->
  <!-- 下面的意思是Asset是你构建的是哪个文件,chunkname是指它在打包的时候临时给app.js起了一个名字 -->
  <!-- Entrypoint main = app.js   好像就是chunkname的名字又指向了app.js -->
  <!--   Asset      Size  Chunks             Chunk Names
app.js  1.13 KiB       0  [emitted]  main -->

webpack配置文件的使用

在这里插入图片描述

/* 
  1.该文件是webpack的配置文件,所有webpack的任务,用到的loader,plugins都要配置到这里
  2.该文件要符合CJS模块化规范(因为它运行在node上)
*/

// 引入node中内置的一个path模块,专门用于解决路径问题
var path = require('path');

// 使用cjs模块规范暴露一个对象,该对象就是webpack的详细配置对象(规则)
module.exports = {
  mode: 'development', // 工作模式
  entry: './src/js/app.js', // 入口
  output: { // 输出
    path: path.resolve(__dirname, 'build/js'), //输出文件的路径  __dirname指的是当前文件所在文件夹的目录
    filename: 'app.js' // 输出文件的名字
  }
};

webpack处理css

webpack默认是不会帮我们处理css,需要我们安装插件也就是loader

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

 module: {
    rules: [
      {
        test: /\.css$/,  // 匹配规则 该loader要处理的文件
        use: [ 
          'style-loader',      // 创建style标签,将样式资源插入,添加到head中生效
          'css-loader'         // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
        ]
      }
    ]
  }

webpack引入HTML文件

之前我们只是把js,css,less文件进入了build,index.html还是我们自己引入打包后的js.现在我们看下如何把index.html也打包进去,然后自己引入js

在这里插入图片描述

插件和loader的区别
插件使用的时候是需要引入的,loader是不需要的。

在这里插入图片描述

npm i -D webpack@4 webpack-cli@3

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
接下来让index.html有我们的内容

/* 
  1.该文件是webpack的配置文件,所有webpack的任务,用到的loader,plugins都要配置到这里
  2.该文件要符合CJS模块化规范(因为它运行在node上)
*/

// 引入node中内置的一个path模块,专门用于解决路径问题
var path = require('path');
// 基本css loader配置
const baseCssLoader = ['style-loader', 'css-loader']

var HtmlWebpackPlugin = require('html-webpack-plugin');

// 使用cjs模块规范暴露一个对象,该对象就是webpack的详细配置对象(规则)
module.exports = {
  mode: 'development', // 工作模式
  entry: './src/js/app.js', // 入口
  output: { // 输出
    path: path.resolve(__dirname, 'build'), //输出文件的路径  __dirname指的是当前文件所在文件夹的目录
    filename: 'js/app.js' // 输出文件的名字
  },
  // module.rules中配置的一个一个的loader,rules一个对象就是一个loader
  module: {
    rules: [
      // 配置解析css
      {
        test: /\.css$/,  // 匹配规则 该loader要处理的文件
        use: [ 
          'style-loader',      // 创建style标签,将样式资源插入,添加到head中生效
          'css-loader'         // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
        ]
      },
      // 配置解析less
      {
        test: /\.less$/,  // 匹配规则 该loader要处理的文件
        use: [ 
          ...baseCssLoader,
          'less-loader'
        ]
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin(
    {
      template: 'src/index.html'   // 模板所在的位置,不是打包以后index.html的位置
    }
  )]
};

webpack处理样式中的图片

在这里插入图片描述

在这里插入图片描述

/* 
  1.该文件是webpack的配置文件,所有webpack的任务,用到的loader,plugins都要配置到这里
  2.该文件要符合CJS模块化规范(因为它运行在node上)
*/

// 引入node中内置的一个path模块,专门用于解决路径问题
var path = require('path');
// 基本css loader配置
const baseCssLoader = ['style-loader', 'css-loader']

var HtmlWebpackPlugin = require('html-webpack-plugin');

// 使用cjs模块规范暴露一个对象,该对象就是webpack的详细配置对象(规则)
module.exports = {
  mode: 'development', // 工作模式
  entry: './src/js/app.js', // 入口
  output: { // 输出
    path: path.resolve(__dirname, 'build'), //输出文件的路径  __dirname指的是当前文件所在文件夹的目录
    filename: 'js/app.js' // 输出文件的名字
  },
  // module.rules中配置的一个一个的loader,rules一个对象就是一个loader
  module: {
    rules: [
      // 配置解析css
      {
        test: /\.css$/,  // 匹配规则 该loader要处理的文件
        use: [ 
          'style-loader',      // 创建style标签,将样式资源插入,添加到head中生效
          'css-loader'         // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
        ]
      },
      // 配置解析less
      {
        test: /\.less$/,  // 匹配规则 该loader要处理的文件
        use: [ 
          ...baseCssLoader,
          'less-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'imgs',   // 这样写最好了
              name: '[hash:6].[ext]' // ext表示图片是什么后缀就是什么后缀,我们只保留6位hash值
            }
          }
        ]
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin(
    {
      template: 'src/index.html'   // 模板所在的位置,不是打包以后index.html的位置
    }
  )]
};

我们想8kb一下的转成base64,这个时候我们就需要用file-loader的加强版url-loader

在这里插入图片描述

在这里插入图片描述

webpack处理html中引入的图片

在这里插入图片描述

在这里插入图片描述
html-loader,url-loader打架的时候报错的情况下,在url-loader里面配置下面这个
esModule:false

/* 
  1.该文件是webpack的配置文件,所有webpack的任务,用到的loader,plugins都要配置到这里
  2.该文件要符合CJS模块化规范(因为它运行在node上)
*/

// 引入node中内置的一个path模块,专门用于解决路径问题
var path = require('path');
// 基本css loader配置
const baseCssLoader = ['style-loader', 'css-loader']

var HtmlWebpackPlugin = require('html-webpack-plugin');

// 使用cjs模块规范暴露一个对象,该对象就是webpack的详细配置对象(规则)
module.exports = {
  mode: 'development', // 工作模式
  entry: './src/js/app.js', // 入口
  output: { // 输出
    path: path.resolve(__dirname, 'build'), //输出文件的路径  __dirname指的是当前文件所在文件夹的目录
    filename: 'js/app.js' // 输出文件的名字
  },
  // module.rules中配置的一个一个的loader,rules一个对象就是一个loader
  module: {
    rules: [
      // 配置解析css
      {
        test: /\.css$/,  // 匹配规则 该loader要处理的文件
        use: [ 
          'style-loader',      // 创建style标签,将样式资源插入,添加到head中生效
          'css-loader'         // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
        ]
      },
      // 配置解析less
      {
        test: /\.less$/,  // 匹配规则 该loader要处理的文件
        use: [ 
          ...baseCssLoader,
          'less-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              outputPath: 'imgs',   // 这样写最好了
              name: '[hash:6].[ext]', // ext表示图片是什么后缀就是什么后缀,我们只保留6位hash值
              limit: 8 * 1024,
              esModule: false
            }
          }
        ]
      },
      {
        test: /\.(html)$/,
        use: ['html-loader']
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin(
    {
      template: 'src/index.html'   // 模板所在的位置,不是打包以后index.html的位置
    }
  )]
};

webpack处理打包的其它资源

url-loader只能处理图片,file-loader可以处理任何文件

在这里插入图片描述

/* 
  1.该文件是webpack的配置文件,所有webpack的任务,用到的loader,plugins都要配置到这里
  2.该文件要符合CJS模块化规范(因为它运行在node上)
*/

// 引入node中内置的一个path模块,专门用于解决路径问题
var path = require('path');
// 基本css loader配置
const baseCssLoader = ['style-loader', 'css-loader']

var HtmlWebpackPlugin = require('html-webpack-plugin');

// 使用cjs模块规范暴露一个对象,该对象就是webpack的详细配置对象(规则)
module.exports = {
  mode: 'development', // 工作模式
  entry: './src/js/app.js', // 入口
  output: { // 输出
    path: path.resolve(__dirname, 'build'), //输出文件的路径  __dirname指的是当前文件所在文件夹的目录
    filename: 'js/app.js' // 输出文件的名字
  },
  // module.rules中配置的一个一个的loader,rules一个对象就是一个loader
  module: {
    rules: [
      // 配置解析css
      {
        test: /\.css$/,  // 匹配规则 该loader要处理的文件
        use: [ 
          'style-loader',      // 创建style标签,将样式资源插入,添加到head中生效
          'css-loader'         // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
        ]
      },
      // 配置解析less
      {
        test: /\.less$/,  // 匹配规则 该loader要处理的文件
        use: [ 
          ...baseCssLoader,
          'less-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              outputPath: 'imgs',   // 这样写最好了
              name: '[hash:6].[ext]', // ext表示图片是什么后缀就是什么后缀,我们只保留6位hash值
              limit: 8 * 1024,
              esModule: false
            }
          }
        ]
      },
      {
        exclude: /\.(html|css|less|scss|js|png|jpg|gif|bmp|json)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'media',   // 这样写最好了
              name: '[hash:6].[ext]', // ext表示图片是什么后缀就是什么后缀,我们只保留6位hash值
            }
          }
        ]
      },
      {
        test: /\.(html)$/,
        use: ['html-loader']
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin(
    {
      template: 'src/index.html'   // 模板所在的位置,不是打包以后index.html的位置
    }
  )]
};

webpack的webpack-dev-server的使用

每次我们修改以后还需要打包重启打开太麻烦了,我们想让它可以实时更新。

这里我们就需要用webpack-dev-server了

其实打包文件已经生成了,只是在内存里面生成的,没有放到硬盘里面

// 查看npm全局安装的包
 npm list -g --depth 0
 // 查看npm全局安装的路径
 npm config get prefix 

要使用 webpack-dev-server来执行

/* 
  1.该文件是webpack的配置文件,所有webpack的任务,用到的loader,plugins都要配置到这里
  2.该文件要符合CJS模块化规范(因为它运行在node上)
*/

// 引入node中内置的一个path模块,专门用于解决路径问题
var path = require('path');
// 基本css loader配置
const baseCssLoader = ['style-loader', 'css-loader']

var HtmlWebpackPlugin = require('html-webpack-plugin');

// 使用cjs模块规范暴露一个对象,该对象就是webpack的详细配置对象(规则)
module.exports = {
  mode: 'development', // 工作模式
  entry: './src/js/app.js', // 入口
  output: { // 输出
    path: path.resolve(__dirname, 'build'), //输出文件的路径  __dirname指的是当前文件所在文件夹的目录
    filename: 'js/app.js' // 输出文件的名字
  },
  // module.rules中配置的一个一个的loader,rules一个对象就是一个loader
  module: {
    rules: [
      // 配置解析css
      {
        test: /\.css$/,  // 匹配规则 该loader要处理的文件
        use: [ 
          'style-loader',      // 创建style标签,将样式资源插入,添加到head中生效
          'css-loader'         // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
        ]
      },
      // 配置解析less
      {
        test: /\.less$/,  // 匹配规则 该loader要处理的文件
        use: [ 
          ...baseCssLoader,
          'less-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              outputPath: 'imgs',   // 这样写最好了
              name: '[hash:6].[ext]', // ext表示图片是什么后缀就是什么后缀,我们只保留6位hash值
              limit: 8 * 1024,
              esModule: false
            }
          }
        ]
      },
      {
        exclude: /\.(html|css|less|scss|js|png|jpg|gif|bmp|json)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'media',   // 这样写最好了
              name: '[hash:6].[ext]', // ext表示图片是什么后缀就是什么后缀,我们只保留6位hash值
            }
          }
        ]
      },
      {
        test: /\.(html)$/,
        use: ['html-loader']
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin(
    {
      template: 'src/index.html'   // 模板所在的位置,不是打包以后index.html的位置
    }
  )],
  devServer: {
    port: 8080,
    open: true, // 自动打开浏览器
    hot:true
  }
};

webpack处理css兼容

npm install --save-dev postcss-loader@4  postcss@8
 npm i -D postcss-preset-env@6

在这里插入图片描述

/* 
  1.该文件是webpack的配置文件,所有webpack的任务,用到的loader,plugins都要配置到这里
  2.该文件要符合CJS模块化规范(因为它运行在node上)
*/

// 引入node中内置的一个path模块,专门用于解决路径问题
var path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 基本css loader配置
const baseCssLoader = [MiniCssExtractPlugin.loader, 'css-loader',
  {
    loader: "postcss-loader",
    options: {
      postcssOptions: {
        plugins: [
            "postcss-preset-env"
        ],
      },
    },
  }
]

var HtmlWebpackPlugin = require('html-webpack-plugin');

// 使用cjs模块规范暴露一个对象,该对象就是webpack的详细配置对象(规则)
module.exports = {
  mode: 'production', // 工作模式 
  entry: './src/js/app.js', // 入口
  output: { // 输出
    path: path.resolve(__dirname, '../build'), //输出文件的路径  __dirname指的是当前文件所在文件夹的目录
    filename: 'js/app.js', // 输出文件的名字
    publicPath:'/build'
  },
  // module.rules中配置的一个一个的loader,rules一个对象就是一个loader
  module: {
    rules: [
      // 配置解析css
      {
        test: /\.css$/,  // 匹配规则 该loader要处理的文件
        use: [ 
          ...baseCssLoader
        ]
      },
      // 配置解析less
      {
        test: /\.less$/,  // 匹配规则 该loader要处理的文件
        use: [ 
          ...baseCssLoader,
          'less-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              outputPath: '/imgs',   // 这样写最好了
              publicPath: '/build/imgs',
              name: '[hash:6].[ext]', // ext表示图片是什么后缀就是什么后缀,我们只保留6位hash值
              limit: 8 * 1024,
              esModule: false
            }
          }
        ]
      },
      {
        exclude: /\.(html|css|less|scss|js|png|jpg|gif|bmp|json)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'media',   // 这样写最好了
              publicPath: '/build/media',
              name: '[hash:6].[ext]', // ext表示图片是什么后缀就是什么后缀,我们只保留6位hash值
            }
          }
        ]
      },
      {
        test: /\.(html)$/,
        use: ['html-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(
      {
        template: 'src/index.html'   // 模板所在的位置,不是打包以后index.html的位置
      }
    ),
    new MiniCssExtractPlugin(
      {
        filename: "css/main.css"
      }
    )
  ]
};

在这里插入图片描述

 "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 10"
    ]
  }

webpack使用babel

npm i -D babel-loader@8 @babel/core@7
npm i -D @babel/preset-env@7

在这里插入图片描述

/* 
  1.该文件是webpack的配置文件,所有webpack的任务,用到的loader,plugins都要配置到这里
  2.该文件要符合CJS模块化规范(因为它运行在node上)
*/

// 引入node中内置的一个path模块,专门用于解决路径问题
var path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 基本css loader配置
const baseCssLoader = [MiniCssExtractPlugin.loader, 'css-loader',
  {
    loader: "postcss-loader",
    options: {
      postcssOptions: {
        plugins: [
            "postcss-preset-env"
        ],
      },
    },
  }
]

var HtmlWebpackPlugin = require('html-webpack-plugin');

// 使用cjs模块规范暴露一个对象,该对象就是webpack的详细配置对象(规则)
module.exports = {
  mode: 'production', // 工作模式 
  entry: './src/js/app.js', // 入口
  output: { // 输出
    path: path.resolve(__dirname, '../build'), //输出文件的路径  __dirname指的是当前文件所在文件夹的目录
    filename: 'js/app.js', // 输出文件的名字
    publicPath:'/build'
  },
  // module.rules中配置的一个一个的loader,rules一个对象就是一个loader
  module: {
    rules: [
      // 配置解析css
      {
        test: /\.css$/,  // 匹配规则 该loader要处理的文件
        use: [ 
          ...baseCssLoader
        ]
      },
      // 配置解析less
      {
        test: /\.less$/,  // 匹配规则 该loader要处理的文件
        use: [ 
          ...baseCssLoader,
          'less-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              outputPath: '/imgs',   // 这样写最好了
              publicPath: '/build/imgs',
              name: '[hash:6].[ext]', // ext表示图片是什么后缀就是什么后缀,我们只保留6位hash值
              limit: 8 * 1024,
              esModule: false
            }
          }
        ]
      },
      {
        exclude: /\.(html|css|less|scss|js|png|jpg|gif|bmp|json)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'media',   // 这样写最好了
              publicPath: '/build/media',
              name: '[hash:6].[ext]', // ext表示图片是什么后缀就是什么后缀,我们只保留6位hash值
            }
          }
        ]
      },
      {
        test: /\.(html)$/,
        use: ['html-loader']
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(
      {
        template: 'src/index.html'   // 模板所在的位置,不是打包以后index.html的位置
      }
    ),
    new MiniCssExtractPlugin(
      {
        filename: "css/main.css"
      }
    )
  ]
};

在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

wabpack也可以做自动化构建工具,webpack还可以做打包编译的功能。
webpack也有很多的插件,也可以实现热加载的功能(热加载指的就是当我们修改了代码以后会自动刷新页面)
把所有webpack的功能插件堆积起来就形成了vue-cli的脚手架
在这里插入图片描述webpack就是用node写出来的
webpack的安装:
在这里插入图片描述因为我们是全局安装所有后面一定要加个-g
打webpack -v会提示我们按照一个webpack-cli(不推荐使用这种方式)
在这里插入图片描述 在这里插入图片描述在这里插入图片描述出现报错自己再全局安装一下
在这里插入图片描述在这里插入图片描述一定要记得保存文件以后再进行编译防止没有编译到内容
在这里插入图片描述在这里插入图片描述相对路径前面一定要加上./,要不然容易找不到路径
entry指的是入口文件
output指的是输出文件
有时候我们还需要载入css,这个时候我们就需要使用到loader
在这里插入图片描述css-loader,ts-loader指的就是css的编译模块,它会在node_modules中进行查找,test是用来检测后缀名的
在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述构建是把代码转换成浏览器识别的代码,打包就是把多个文件打包成一个文件。

在这里插入图片描述
在这里插入图片描述
意思是把我们的文件夹初始化成一个node.js的包。
package.json是每个项目包的描述文件。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述它不会合并到输出的代码里。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这里就说明了webpack可以帮我们把相关的文件转成成一个文件。

在这里插入图片描述
node只能执行common.js规范的代码,也就是使用require和module.export

我们平时在react中使用的import,export是浏览器识别的。

在这里插入图片描述loader就是加载机的意思。(webpack默认只认识js文件),使用了加载机以后webpack在打包的时候就可以把我们写的es6的语法转成其它浏览器也兼容的格式。

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述
只写not ie不行范围太大了。

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
倒着往上看,上面说错了。

在这里插入图片描述
帮助我们压缩css样式。

在这里插入图片描述在这里插入图片描述
react里面默认支持less,vue默认支持scss.

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述开发环境并不会创建真实的物理文件。(所以本地的css文件在js里面打包构建也没事,开发环境拆分开就好了)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
源代码的映射(source-map)

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
路由做了什么 事,它就是把我们view的单文件的组件和一个可访问的url路径进行一个关联。在我们访问它的时候,它动态的去加载组件。然后把它渲染到dom对象里面。在这里插入图片描述在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
这样起名以后,名字一样的就会打包到一个包文件里面。

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述上面需要引入一下path.

在这里插入图片描述 在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

https://www.bilibili.com/video/BV1GF411i7zQ?spm_id_from=333.999.0.0

参考文章:https://www.jianshu.com/p/66a6240112f9

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值