从零搭建一个webpack+vue的简单项目

bluesky108
330 阅读3分钟

前言

最近学习了一些webpack的配置，于是打算自己搭一个简单的vue项目，不去直接使用vue-cli工具去生成。此项目没有使用vue-router和vuex，有兴趣的小伙伴可以自行思考添加

实现思路及步骤

  1. 首先创建三个配置文件，分别是webpack.common.js（公共配置文件），开发配置文件（webpack.dev.js），生产配置文件（webpack.prod.js）
  2. 安装webpack， npm install webpack webpack-cli webpack-dev-server webpack-merge -D，webpack-merge 是用来把两个webpack配置文件合并用的
  3. 安装编译css资源文件的依赖 npm install style-loader css-loader less-loader less -D
  4. 安装js资源文件的依赖 npm install babel-loader @babel/core @babel/preset-env -D
  5. 安装图片资源文件的依赖 npm install file-loader url-loader -D 这里会有个小问题，配置loader的时候，注意添加配置选项 " esModule: false "，因为vue使用的是commonjs语法规范，而file-loader/url-loader使用的es module语法规范。所以不设置的话，vue-loader处理之后img src会变成"[object Module]"
  6. 安装vue资源文件的依赖 npm install core-js vue -S 和 npm install vue-loader vue-style-loader vue-template-compiler -D
  7. 安装一些功能插件 npm install clean-webpack-plugin copy-webpack-plugin html-webpack-plugin -D
  8. 目前就可以正常的进行打包和调试了。后期可以尝试着加上一些eslint检查，路由和vuex。
  9. 使用eslint，先安装eslint npm install eslint eslint-loader babel-eslint -D，安装完后，生成eslint的配置文件，执行命令 npx eslint --init
  10. 配置webpack的module.rules，对js和vue文件设置eslint-loader
  11. 设置eslint的配置文件 .eslinttrc.js
  12. 设置eslint的忽略文件 .eslintignore

PS： 项目地址： github.com/blueSky1008…

实现过程

  • webpack.common.js
// webpack.common.js 
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin') // 配合 vue-loader 使用，用于编译转换 .vue 文件
const webpack = require('webpack')
const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.js'
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        use: 'vue-loader'
      },
      {
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /.less$/,
        use: [ 'style-loader', 'css-loader', 'less-loader' ]
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024,
            // 解决vue-loader处理之后img src变成"[object Module]"问题
            esModule: false // 不使用esModule的规范，因为vue使用的是commonjs语法规范，而file-loader/url-loader使用的es module语法规范。 
          }
        }
      },
      
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      // 值要求的是一个代码片段
      BASE_URL: JSON.stringify('')
    }),
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      title: '自己实现一个vue的webpack配置文件',
      template: './public/index.html',
      minify: false,
      inject: true
    }),
  ],
}
  • webpack.dev.js
// webpack.dev.js 
const { merge } = require('webpack-merge') // 用来合并webpack配置文件
const webpack = require('webpack')
const common = require('./webpack.common.js')

module.exports = merge(common, {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    hot: true, //启用 webpack 的模块热替换特性
    open: true, //自动打开浏览器
    contentBase: 'public', // 静态资源目录
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
})
  • webpack.prod.js
// webpack.prod.js 
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = merge(common, {
  mode: 'production',
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: ['public']
    })
  ]
})
  • package.json
{
  "name": "webpack-vue-zero",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "webpack-dev-server --config webpack.dev.js --open",
    "build": "webpack --config webpack.prod.js"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@vue/cli-plugin-babel": "^4.5.8",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.2.1",
    "css-loader": "^5.0.0",
    "file-loader": "^6.1.1",
    "html-webpack-plugin": "^4.5.0",
    "less": "^3.12.2",
    "less-loader": "^7.0.2",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "vue-loader": "^15.9.3",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10",
    "webpack-merge": "^5.2.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

使用Eslint去实现代码风格的校验与检查

  • webpack.common.js 文件增加一个module.rules
// webpack.common.js
module.exports = {
	module: {
    	rules: [
        	{
              test: /.(js|vue)$/,
              use: 'eslint-loader',
              enforce: 'pre', // 编译前检查
              exclude:/(node_modules)/
            }
        ]
    }
}
  • 设置eslint的配置文件 .eslinttrc.js
// .eslinttrc.js
module.exports = {
  root: true, // 告诉eslint使用此文件为配置文件，可以不写，只是方便直接定位到此文件
  env: {
    browser: true, // 可以使用浏览器的环境变量
    node: true, // 可以使用node的变量
    commonjs: true, // 可以使用commonjs规范
    es6: true
  },
  extends: [
    'plugin:vue/essential',
    'standard' // eslint的规则模板
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module', // 使用es module模块
    parser: 'babel-eslint', // eslint的解析器
    jsx: true // 开启jsx
  },
  plugins: [
    'vue'
  ],
  rules: {
  }
}
  • 设置eslint的忽略文件 .eslintignore
/build/
/config/
/dist/
/static/
/*.js
  • 在package.json中设置eslint的执行命令
{
  "name": "webpack-vue-zero",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "lint": "eslint --ext .js,.vue src",
    "lintfix": "eslint --fix --ext .js,.vue src"
  },
}

命令 eslint --ext .js,.vue src
--ext 是用来指定在哪个目录下执行eslint的
.js,.vue 是指对哪些文件执行eslint src 是文件夹名字

--fix 是eslint先自动修复一些问题，剩下不能修复的再由开发人员手动修复

avatar
文章
阅读
粉丝