webpack与vue2环境搭建

webpack与vue2环境搭建

• 安装vue相关的依赖

  npm i vue-loader@15 vue-template-compiler -D
  
  npm i vue@2 vue-router@3 vuex@3 -S
  

• 配置

  .....
  //解析VueLoaderPlugin
  const {VueLoaderPlugin} =require('vue-loader')
  
  //创建一个webpak配置对象
  const config = {
      .....
      //配置loader
      module: {
          rules: [
        .....
          //配置vue
              {
                  test:/\.vue$/i,use:['vue-loader']
              }
          ]
      },
      //配置插件
      plugins: [
          new VueLoaderPlugin(),
         ....
      ],
     .....
  }
  
  
  //抛出对象
  module.exports=config
  

• 创建vue测试文件

• 运行

• 集成路由

• 集成vuex

• 与vue2集成的完整配置代码：

  //引入相关依赖
  const webpack = require('webpack')
  const path = require('path')
  //html自动生成插件,可以自动注入css,js
  const HtmlWebpackPluin = require('html-webpack-plugin')
  //引入css抽离插件
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  
  //解析VueLoaderPlugin
  const {VueLoaderPlugin} =require('vue-loader')
  
  //创建一个webpak配置对象
  const config = {
      //设置模式
      mode:'development',
      //配置入口
      entry:'./src/main.js',
      //配置出口
      output: {
         //打包路径
        path:path.resolve(__dirname,'dist'),
         //打包文件名 
          filename: 'js/bundle[contenthash].js',
         //静态资源输出目录
          assetModuleFilename:'imgs/[name][hash][ext]',
        //清理无用文件
          clean:true
          
      },
      //配置loader
      module: {
          rules: [
          //解析css
              {
                  test:/\.css$/i,use:[MiniCssExtractPlugin.loader,'css-loader']
              },
          //解析sass
              {
                  test:/\.s[ac]ss$/i,use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader']
              },
           //解析图片，字体图标,svg
              {
                  test:/.(jpg|jpeg|gif|png|svg)$/i,type:'asset/resource'
              },
          //配置vue
              {
                  test:/\.vue$/i,use:['vue-loader']
              }
          ]
      },
      //配置缺省文件类型
      resolve: {
          extensions:['.js','.json','.vue']
      },
      //配置插件
      plugins: [
          new VueLoaderPlugin(),
          new MiniCssExtractPlugin({
              filename:'css/project.css'
          }),
          new HtmlWebpackPluin({
              //从哪个模板生成html
              template:'./public/index.html',
              //生成后的html文件名
              filename:'index.html'
          })
      ],
      //sl
      //配置webpack服务器
      devServer: {
          //配置端口号
          port: 9999,
          //静态目录位置
          static: {
              directory:'dist'
          }
      }
  }
  
  
  //抛出对象
  module.exports=config