webpack搭建vue项目步骤详解

最新推荐文章于 2023-06-14 09:26:12 发布

w7022@

最新推荐文章于 2023-06-14 09:26:12 发布

阅读量228

点赞数

原文链接：https://blog.csdn.net/wjw0125/article/details/107019377

版权

总结

第一步

执行npm init 命令初始化出package.json文件

  {
    "name": "demo1", 
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
  }

name 表示项目的名称
version 表示项目的版本号
description 对项目的描述
main 项目的入口文件
script 脚本命令配置
author 作者(可以使用项目作者的名字)
license 证书

第二部

执行 yarn add webpack webpack-cli --save-dev 或者执行 cnpm/npm install webpack webpack-cli --save-dev
其中第一个表示安装webpack打包工具
第二个表示安装webpack脚手架安装了脚手架才能使用wepback命令
第三部

配置构建脚本如下面的build脚本

"scripts": {
  "build": "webpack",
  "test": "echo \"Error: no test specified\" && exit 1"
}

 
 

  
  

   
   配置完成后可以运行npm run build 命令执行项目构建

这时会报错 can not resolve ./src

这是因为找不到项目的入口文件

  
  

 
 
解决办法

 
 在项目根木录中创建出src文件夹
然后在src文件夹中新增index.js文件 此时js文件名称不能随意命名

 
 

  
  

   
   解决完成后再次执行npm run build 命令发现项目中多出一个dist文件夹

dist文件夹中有一个压缩过后的js文件 main.js 在该文件中可以找到在src文件夹下的index.js的代码

此时表示能够成功打包项目但是终端会提示未设置mode的警告

  
  

 
 
解决办法

 
 配置package.json中的脚本如下
"scripts": {
  "build": "webpack --mode production",
  "dev": "webpack --mode development",
  "test": "echo \"Error: no test specified\" && exit 1"
},

  
  再次运行npm run build 命令 发现警告消失
运行build脚本生成的js文件会进行压缩 运行dev命令不会

  
  

   
   第四步

   
   

    
    配置出入口文件

   
   

  
  

  
  在项目根目录中创建src文件夹 然后在src文件下创建main.js
这时打包会报错 因为没有修改入口文件配置

项目根目录中创建webpack.config.js文件
在文件中写入
  const path = require('path')
  module.exports = {
    // 配置入口文件 入口的值可以是一个字符串 也可以是一个对象
    // entry: './src/main.js'
    entry: {
      // 入口文件是对象的时候 对象的key(在不配置output的时候)会作为默认生成的js文件的文件名称
      index: './src/main.js'
    },
    // 打包输出文件的相关配置
    // publicPath : __dirname + '/static/' 表示publicpath(资源引入路径)为绝对路径
    // publicPath: '/' 资源引入从根目录开始
    // publicPath: './' 代表相对路径
    output: {
      publicPath: '/', // 公共资源引入的路径
      path: path.resolve(__dirname, 'dist'), // 将打包生成的文件夹解析到当前项目的跟目录中
      filename: 'index.js' // 打包生成的js文件的名称
第五步

   
   

    
    引入bable

   
   

   
   使用 npm i @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime @babel/polyfill @babel/runtime --save-dev 安装babel相关依赖
在项目的根目录中创建名为 .babelrc 的新文件来配置 Babel:
{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}
如果遇到如下警告
WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option. 
不仅仅要安装 npm install --save core-js@3 还需要设置 .babelrc 设置 “corejs”: 3
{
 "presets": [
   [
     "@babel/preset-env",
     {
       "useBuiltIns": "usage",
       "corejs": 3
     }
   ]
 ],
 "plugins": ["@babel/plugin-transform-runtime"]
}
安装结束后配置babel-loader
// 在webpack.config.js中添加配置
module: {
  rules: [
    test: /\.js$/
    exclude: '/node_modules/',
    use: {
      loader: 'babel-loader'
    }
  ]
}
安装命令

       
       安装相关插件

clean-webpack-plugin用来删除并重新生成dist文件夹 html-webpack-plugin 为了自动生成html文件
npm install clean-webpack-plugin html-webpack-plugin --save-dev

安装文成后完善webpack.config.js如下
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin')
  module.exports = {
    entry: {
      index: './src/main.js'
    },
    output: {
      publicPath: '/',
      path: path.resolve(__dirname, 'dist'),
      filename: 'index.js'
    },
    plugins: [
      new CleanWebpackPlugin(),
      new htmlWebpackPlugin({
        title: '自定义标题',
        minify: {
          removeComments: true, // 打包后移除html文件中的注释
          collapseWhitespace: true, // 打包后移除html文件中的空白符
          minifyCSS: true // 压缩内联css
        },
        template: './public/index.html', // 生成html文件所需要的模板文件
        filename: 'index.html' // 配置生成的html文件名称
      })
    ],
    module: {
      rules: [
        {
	        test: /\.js$/
	        exclude: '/node_modules/',
	        use: {
	          loader: 'babel-loader'
	        }
        }
      ]
    }
  }
第六步

        
        安装vue相关依赖
npm install vue vue-router vue-loader vue-template-compiler --save-dev
然后为了实现vue的热更新引入webpack的webpack-dev-server 和热更新模块
npm install webpack-dev-server --save-dev
完善webpack.config.js配置如下
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
  module.exports = {
    entry: {
      index: './src/main.js'
    },
    output: {
      publicPath: '/',
      path: path.resolve(__dirname, 'dist'),
      filename: 'index.js'
    },
    plugins: [
      new CleanWebpackPlugin(),
      new webpack.HotModuleReplacementPlugin(), // 热部署模块
      new webpack.NamedModulesPlugin(),
      new VueLoaderPlugin(),
      new htmlWebpackPlugin({
        title: '自定义标题',
        minify: {
          removeComments: true,
          collapseWhitespace: true, // 打包后移除html文件中的空白符
          minifyCSS: true // 压缩内联css
        },
        template: './public/index.html', // 生成html文件所需要的模板文件
        filename: 'index.html' // 配置生成的html文件名称
      })
    ],
    module: {
      rules: [
      {
        test: /\.js$/
        exclude: '/node_modules/',
        use: {
          loader: 'babel-loader'
        }
      }
      ]
    },
    mode: 'development', // 开发模式
    devtool: 'source-map', // 开启调试
    devServer: {
      contentBase: path.join(__dirname, 'static'),
      port: 3000, // 本地服务器端口号
      hot: true, // 热重载
      overlay: true, // 如果代码出错，会在浏览器页面弹出“浮动层”。类似于 vue-cli 等脚手架
      historyApiFallback: {
        // HTML5 history模式
        rewrites: [{ from: /.*/, to: '/index.html' }]
      }
    }
  }
完成后的项目结构如下