【webpack】从零开始使用webpack搭建vue项目

shumo
237 阅读3分钟

之前使用vue，都是用的vue-cli初始化项目。本次决定使用webpack搭建，只使用了vue，未涉及到vue-router和vuex，如有需要自行添加相关配置。
注：阅读本文需要对webpack和vue有基本了解

第一步 新建文件夹webpack-demo，并初始化项目

npm init

根据提示输入项目信息，最后会在webpack-demo文件夹中生成一个package.json文件，如下：

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

第二步 安装webpack依赖

npm i webpack webpack-cli webpack-merge --save-dev

第三步 在项目根目录下新建webpack.common.js、webpack.dev.js和webpack.prod.js

注：webpack.common.js配置公共部分，webpack.dev.js配置开发环境，webpack.prod.js配置生产环境。

第四步 配置webpack.common.js

  • 安装插件：
npm i html-webpack-plugin clean-webpack-plugin --save-dev

html-webpack-plugin：创建html文件，并自动引入webpack构建的js
clean-webpack-plugin：使用该插件，可在每次构建前清理/dist文件夹，防止无用代码冗余

  • 安装loader：
npm i style-loader css-loader babel-loader @babel/core @babel/preset-env --save-dev

style-loader:把 CSS 插入到 DOM 中
css-loader:会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样
babel:处理es6语法

  • 新建babelrc
{
  "presets": [
    "@babel/preset-env"
  ]
}

注：不同版本的babel，配置可能略有不同，请参照官方文档

  • webpack.common.js配置
const path=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const {CleanWebpackPlugin} =require('clean-webpack-plugin')

module.exports={
  entry:'./src/index.js',
  output:{
    filename:'bundle.js',
    path:path.resolve(__dirname,'dist')
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:[
          'style-loader',
          'css-loader'
        ]
      },
      {
        test:/\.js$/,
        exclude:/node_modules/,
        use:[
          'babel-loader'
        ]
      }
    ]
  },
  plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title:'webpack test',
      template:'./public/index.html'
    })
  ]
}

第五步 配置webpack.dev.js

  • 使用webpack-merge合并webpack.dev.js和webpack.common.js
  • 安装webpack-dev-server，用于开启本地服务
npm i webpack-dev-server --save-dev
  • webpack.dev.js配置
const {merge} = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports=merge(common,{
  mode:'development',
  devtool:'inline-source-map',
  devServer:{
    static:'./dist',
    hot:true
  }
})

第六步 配置webpack.prod.js

  • 使用webpack-merge合并webpack.prod.js和webpack.common.js
  • 安装uglifyjs-webpack-plugin
npm i uglifyjs-webpack-plugin --save-dev
  • webpack.prod.js配置
const {merge} = require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports=merge(common,{
  mode:'production',
  devtool:'source-map',
  plugins:[
    new UglifyJsPlugin({
      sourceMap:true
    })
  ]
})

第七步 配置package.json的script，在script中新增脚本

"build": "webpack --config webpack.prod.js",
"start": "webpack-dev-server --open --config webpack.dev.js"

第八步 在项目根目录下新建src文件夹，并在src下新建index.js入口文件

index.js

const hello=()=>{
  console.log('hello webpack')
}
hello()

第九步 在项目根目录下新建public文件夹，并在public下新建index.html模板文件

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

到此webpack基本配置已结束，在终端运行npm run start可开启开发环境，运行npm run build可在/dist目录下生成打包后的代码

第十步 配置vue

  • 安装依赖
npm i vue vue-loader vue-template-compiler --save-dev
  • webpack.common.js配置
const path=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const {CleanWebpackPlugin} =require('clean-webpack-plugin')
+ const {VueLoaderPlugin} = require('vue-loader')

module.exports={
  entry:'./src/index.js',
  output:{
    filename:'bundle.js',
    path:path.resolve(__dirname,'dist')
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:[
          'style-loader',
          'css-loader'
        ]
      },
     + {
     +   test:/\.vue$/,
     +   use:[
     +    'vue-loader'
     +   ]
     + },
      {
        test:/\.js$/,
        exclude:/node_modules/,
        use:[
          'babel-loader'
        ]
      }
    ]
  },
  plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title:'Text Carousel',
      template:'./public/index.html'
    }),
  +  new VueLoaderPlugin()
  ]
}

注：

  1. VueLoaderPlugin这个插件是必须的，没有会报错
  2. 标注“+”表示新增的配置
  • 在src目录下新建App.vue文件 App.vue
<template>
  <div id="app">{{name}}</div>
</template>
<script>
export default {
  name:'App',
  data(){
    return{
      name:'hello vue'
    }
  }
}
</script>
  • 修改index.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
  el: '#root',
  render: h => h(App)
})

此时在终端运行npm run start,页面会显示hello vue，到此全部配置结束。
说明：若配置好后，运行报错，不要害怕，绝大部分是因为您当前安装的版本和我的版本不一致,导致配置略有差异。这个时候，果断找到报错的插件，然后在官网上或者git或者npm寻找对应的配置。切记：webpack官网的配置不一定是最新的。 最后附项目目录截图和所安装依赖版本：

1637308074(1).png

"devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "babel-loader": "^8.2.3",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.5.1",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue": "^2.6.14",
    "vue-loader": "^15.9.8",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.64.1",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.5.0",
    "webpack-merge": "^5.8.0"
  }
avatar
文章
阅读
粉丝