webpack + vue 项目案例

从零开始搭建webpack + vue 项目

一、webpack + vue项目的基本构建和配置

1、在指定目录下创建项目文件夹

2、使用vscode开发工具打开项目文件夹，并进行初始化

npm init  // 项目初始化命令

3、 做好以上步骤，那么就可以进行安装并配置项目所需包文件

3.1 、首先，需要安装项目打包工具、配置项目入口文件以及项目打包输出文件

// 如果你使用webpack版本，则需要安装webpack-cli
npm install --save-dev webpack
npm install --save-dev webpack-cli

3.2 创建项目目录结构，基本目录如下

[外链图片转存失败(img-jT3ATen7-1562501291415)(/home/andycabbage/sources/typora/images/ztodo-1.png)]

build： 文件夹主要是存放webpack、vue-loader的配置文件

dist：项目文件打包后存放的目录（此目录不用特意去创建，在打包输出文件时指定目录名称即可）

node_modules：所有公共包文件所在目录，如：webpack、vue、stylus等

src：存放源码

package.json：配置项目运行构建等命令、项目名称，版本号、作者等，以及公共包的版本好，如：“webpack”: “^4.35.2”,

3.3 首先安装webpack、webpack-cli、vue、vue-loader、css-loader、vue-template-compiler基础包

npm install --save-dev webpack webpack-cli
npm install vue -S
npm install -D vue-loader vue-template-compiler
npm install --save-dev css-loader

3.3.1 在src目录下创建app.vue文件

3.3.2 创建入口文件index.js

import Vue from 'vue'
import App from './app.vue'

const root = document.createElement('div')
document.body.appendChild(root)

new Vue({
  render: (h) => h(App)
}).$mount(root)

3.4 webpack + vue 基本配置，如下：

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

const config = {
    entry: path.resolve(__dirname, './src/index.js'),  // 入口文件
    output: {   // 出口文件
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    // mode: 'production',   // 设置module参数，可启用相应模式的webpack内置优化
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                loader: 'css-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

module.exports = config

注意：在使用vue-loader15+，必须配置VueLoaderPlugin

3.4.1 在package.json文件中配置构建命令

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

在此配置运行命令的好处是只会调用安装在项目里面的webpack，如果在命令窗口直接运行npm run build是调用全局的webpack，全局webpack可能会和项目使用到的webpack版本有所不同，所以在package文件配置命令，可以很好的避免版本上带来的问题。

ok！到此项目运行npm run build 进行构建了

4、配置项目各种静态资源及css预处理器

4.1 静态资源配置

4.1.1 静态资源安装

npm install style-loader --save-dev
npm install --save-dev url-loader file-loader //url-loader是基于file-loader的

4.1.2 配置

module: {
        rules: [
            {
                test: /\.css$/,
                use: {
                    'style-loader',
                    'css-loader'
                }
            },
            {
                test: /\.(gif|jpg|jpeg|png|svg)/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 1024,    // 每次输出文件的字节数的大小
                        name: '[name].[ext]'    // 输出的文件类型
                    }
                }
            }
        ]
    },

4.1.3 css预处理器

npm install stylus-loader stylus --save-dev

基础配置

module: {
        rules: [
            {
                test: /\.styl(us)?/,
                use: [
                    'css-loader',
                    'stylus-loader'
                ]
            }
        ]
}

5、webpack-dev-server的配置和相关设置

npm install --save-dev webpack-dev-server

npm install --save-dev cross-env
// cross-env是设置系统环境变量的，不同平台会有不同的环境变量，cross-env主要提供处理环境变量方案，只要正确的设置，则无需在开发中过多的去关注环境变量的设置问题

在使用webpack-dev-server之前，需要配置webpack的编译目标target

 target: 'web',  // 编译目标

综合以上配置如下：

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

const isDev = process.env.NODE_ENV === 'development'

const config = {
    target: 'web',  // 编译目标
    entry: path.resolve(__dirname, './src/index.js'),  // 入口文件
    output: {   // 出口文件
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    // mode: 'production',   // 设置module参数，可启用相应模式的webpack内置优化
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.styl(us)?/,
                use: [
                    'style-loader',
                    'css-loader',
                    'stylus-loader'
                ]
            },
            {
                test: /\.(gif|jpg|jpeg|png|svg)/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 1024,    // 每次输出文件的字节数的大小
                        name: '[name].[ext]'    // 输出的文件类型
                    }
                }
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new webpack.DefinePlugin({
            'process-env': {
                NODE_ENV: isDev ? '"development"' : '"production"'
            }
        }),
        new HtmlPlugin()
    ]
}

if (isDev) {
    config.devTool = '#cheap-module-eval-source-map'
    config.devServer = {
        port: 8010,
        host: '0.0.0.0',    // 可以通过loaclhost、127.0.0.1、本机内网ip、手机等访问
        overlay: {  // 将编译的错误显示到页面上
            errors: true
        },
        hot: true   // 热加载
    }
}

module.exports = config

以上是webpack + vue的基本配置

二、代码校验eslint的配置

安装

npm install eslint --save-dev

手动设置需要的插件：

npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

在根目录下创建 .eslintrc 文件

在eslint中无法直接识别vue文件中的JavaScript的代码，需要安装eslint-plugin-html插件

npm install --save-dev eslint-plugin-html

.eslintrc 文件配置

{
  "extends": ["standard", "plugin:vue/recommended"],
  "plugins": [
    "html"
  ]
}

运行eslint的命令配置(package.json)

  "scripts": {
    "lint": "eslint --ext .js --ext .jsx --ext .vue src/",
    "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
  },

–fix 自动修复问题代码

配置好后，就可以执行npm run lint-fix和npm run lint 进行校验代码，执行后会报如下错误

[外链图片转存失败(img-KYGHhqd8-1562501291418)(/home/andycabbage/sources/typora/images/errors-1.png)]

解决方法： https://blog.csdn.net/qq_37254736/article/details/92794864

再次执行命令之前需安装 eslint-plugin-vue插件

npm i --save-dev eslint-plugin-vue

自动校验代码

npm i --save-dev eslint-loader babel-eslint

在eslintrc文件中增加如下配置

  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaFeatures": {
      "jsx": true
    }

为了更好使用代码规则，避免错误的代码格式提交到远程仓库，需要安装husky（二哈）

npm i --save-dev husky

在package.json中的配置

  "scripts": {
    "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/",
    "precommit": "npm run lint-fix"
  },

三、优化升级配置文件

在正式开发之前还需配置postcss、babel

npm i --save-dev postcss-loader autoprefixer
npm i --save-dev babel-loader @babel/core

postcss.config.js 配置文件

const autoprefixer = require('autoprefixer')

module.exports = {
  plugins: [
    autoprefixer()
  ]
}

module: {
        rules: [
            {
              test: /\.jsx$/,
              exclude: /(node_modules|bower_components)/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['@babel/preset-env']
                }
              }
            },
            {
                test: /\.styl(us)?/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                      loader: 'postcss-loader',
                      options: {
                        sourceMap: true
                      }
                    },
                    'stylus-loader'
                ]
            }
        ]
    }

.babelrc配置文件

npm i --save-dev @babel/preset-env
npm i --save-dev babel-plugin-transform-vue-jsx@next
npm install --save-dev @babel/plugin-syntax-jsx

npm i --save-dev vue-eslint-parser eslint@^5.16.0

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "transform-vue-jsx"
  ]
}

提取css

webpack4中vue官方推荐使用mini-css-extract-plugin

单独打包类库文件

hash与chunkhash的区别

webpack相关文件单独打包

待续。。。。。。