从0到1开发 vue+webpack4 项目

Zz燕
173 阅读2分钟

一、项目初始化

1.init初始化

# 生成 package.json 文件
$ npm init -y

2.安装 webpack

# webpack4.0 后需要单独安装 webpack-cli
$ npm install -D webpack webpack-cli

3.安装 Vue

$ npm install -S vue

二、编写项目入口

1.index.html

根目录创建index.html，作为项目主页文件:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>hello hotyan</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

2.App.vue

根目录创建 src 文件夹，新建 App.vue 文件：

// App.vue
<template>
    <div>
        hello hotyan
    </div>
</template>
<script>
    export default {
        name: 'App'
    }
</script>
<style lang="scss" scoped>
// ...
</style>
  1. main.js
// src/main.js
import Vue from 'vue'
import App from './App.vue' // 引入App组件
new Vue({
    el:'#app',
    render:h=>h(App)
})
// 同上
// new Vue({}).$mount('#app')

三、webpack基本配置

  1. 根目录创建 webpack.config.js 文件
// webpack.config.js
const path require('path')
module.exports = {
    entry: './src/main.js'， // 打包入口
    output: { // 打包出口
        filename: 'index.js', // 文件名字
        path: path.resolve(__dirname,'dist') // 文件路径
    }
}
  1. 修改 package.json 文件
// package.json
"scripts": {
    "build": "webpack --config ./webpack.config.js"
}
  1. 测试运行
$ npm run build
# 报错，提示对于后缀名为 .vue 的文件不能被打包（因为 webpack 只能打包 js 文件）

四、Loader

vue-loader

  1. 安装 vue-loader
$ npm install -D vue-loader vue-template-compiler
# WARN: vue-loader 依赖 css-loader
  1. 安装 css-loader
$ npm install -D css-loader
  1. webpack 配置
// webpack.config.js
// == 新增：引入 vue-loader 插件 ==
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    ...
    // == 新增：打包规则 ==
    module:{
        rules:[
            test: /\.vue$/,
            loader: 'vue-loader'
        ]
    },
    // ==新增：插件 ==
    plugins: [
        new VueLoaderPlugin()
    ]
}

file-loader、url-loader

  1. 安装
$ npm install -D file-loader
  1. 用法
// webpack.config.js
module.exports = {
    ...
    module: {
        rules: {
            test: /\.(png|jpg|gif|svg)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]',
                    outputPath: 'images'
                }
            }
        }
    }
}

style-loader、css-loader、sass-loader

1.安装

$ npm install -D style-loader css-loader sass-loader node-sass	
# sass-loader 依赖 node-sass, style-loader 和 css-loader 与 sass-loader 链式调用

2.用法

按照从右到左，从下到上的顺序依次执行，所以书写顺序有讲究：style-loader,css-loader,sass-loader:

// webpack.config.js
module.exports = {
    ...
    module:{
        rules: {
            test: /\.scss/,
            use: [
                'style-loader', // 将js字符串生成style节点
                'css-loader', // 将css转化成CommonJS
                'sass-loader' // 将Sass编译成css,默认使用Node Sass
            ]
        }
    }
}

postcss-loader

1.安装

$ npm install -D postcss-loader

2.用法

在style-loader,css-loader之后，但要在其他预处理加载程序（sass|less|stylus-loader）之前使用:

// webpack.config.js
module.exports = {
    module: {
        rules: {
            test: /\.scss$/,
            use: ['style-loader','css-loader','postcss-loader','sass-loader']
        }
    }
}

babel-loader

  1. 安装
$ npm install -D babel-loader @babel/core @babel/preset-env
  1. 用法
// webpack.config.js
module.exports = {
    ...
    module: {
        rules: {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            } 
        }
    }
}

babel-loader

1.安装

$ npm install -D babel-loader @babel/core @babel/preset-env

2.用法

可独立写在babel.config.js文件中，也可不：

// webpack.config.js
...
rules: {
    test: /\.m?js$/,  // 该正则可确保转义更少的文件
    exclude: /node_modules/, // 排除 node_modules 文件
    use: [
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env']
        }
    ]
}
...

五、Plugins

html-webpack-plugin

1.安装

$ npm install -D html-webpack-plugin

2.用法

HtmlWebpackPlugin简化 HTML 文件的创建。包含在 body 的 script 标签中引入所有 webpack 包：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.expoets = {
    ...
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname,'index.html') // 模板为根目录下的 index.html
        })
    ]
}

clean-webpack-plugin

1.安装

$ npm install -D clean-webpack-plugin

2.用法

每次构建前清理 /dist 文件夹。

// webpack.config.js
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    ...
    pluhins: [
        new CleanWebpackPlugin()
    ]
}

autoprefixer

自动添加浏览器厂商前缀。

  1. 安装
$ npm install -D postcss-loader autoprefixer  
# 依赖 postcss-loader
  1. 用法
// 用法二：postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}
// 用法一：webpack.config.js
...
use: [
    'style-loader',
    'css-loader',
    {
        loader: 'postcss-loader',
        options: {
            plugins: [
                require('autoprefixer')
            ]
        }
    },
    'sass-loader'
]
...

// package.json
"browserslist": [
    "> 1%",
    "last 2 versions"
]

mini-css-extract-plugin

1.安装

$ npm install -D mini-css-extract-plugin

2.用法

生产环境下，使用mini-css-extract-plugin将样式表抽离成专门的单独文件。

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    ...
    module: {
        rules: {
            test: /\.scss/,
            use: [
                { loader: MiniCssExtractPlugin.loader },
                { loader: 'css-loader' },
                { loader: 'sass-loader'}
            ]
        }
    },
    plugins: [
        new MiniCssExtractPlugin({
        filename: '[name].css',
            chunkFilename: '[id].css'
        })
    ]
}

六、开发环境

  • 不需要压缩代码

  • 需要本地服务器和热更新

  • css 不需要提取到 css 文件

  • sourceMap，映射

source map

当 webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置。将编译后的代码映射回原始源代码。

// webpack.config.js
module.exports = {
    mode: 'development',
    devtool: 'inline-source-map',
    ...
}

webpack-dev-server

1.安装

$ npm install -D webpack-dev-server

2.用法

提供简单的web server，并具有live reloading（实时重载）功能。

// webpack.config.js
module.exports = {
    devServer: {
        // 告诉服务器从哪个目录中提供内容。(提供静态文件时才需要。devServer.publicPath 将用于确定应该从哪里提供 bundle，并且此选项优先。)
        contentBase: './dist',	
        port: 8888, // 端口
        hot: true, // 模块热替换
        open: true, // 自动打开浏览器
        host: '0.0.0.0', // 默认是 localhost。希望服务器外部可访问，可指定
        proxy: {
            '/api': {
                // 请求到 /api/users 现在会被代理到请求 http://localhost:3000/api/users
                target: 'http://loaclhost:3000', 
                // 不想始终传递 /api ,重写路径
                pathRewrite: {'^/api':''} 
            }
        }
    }
}

webpack-dev-middleware

webpack-dev-middleware 是一个封装器(wrapper)，它可以把 webpack 处理过的文件发送到一个 server。webpack-dev-middleware 可配合 express server。

  1. 安装
$ npm install -D express webpack-dev-middleware
  1. 用法

七、生产环境

  • 压缩代码
  • 不需要本地服务器和热更新
  • 提取 css，压缩 css 文件
  • sourceMap
  • 构建前清除上一次构建的内容

webpack-merge

  1. 安装
$ npm install -D webpack-merge
  1. 用法
// webpack.dev.js
const merge = require('webpack-merge')
const common = require('./webpack.config.js')
module.exports = merge(common,{
    mode: 'development'
})
// package.json
"script":{
    "dev": "webpack-dev-server --config ./webpack.dev.js",
    "prod": "webpack --config ./webpack.prod.js"
}

八、其他

cross-env

跨平台的解决环境变量和参数的命令配置。

  1. 安装
$ npm install -D cross-env
  1. 用法
// package.json
"script":{
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./webpack.dev.js",
    "prod": "cross-env NODE_ENV=production webpack --config ./webpack.prod.js"
}

resolve.alias

指定别名：

// webpack.config.js
module.exports = {
    ...
    resolve: {
        alias: {
            '@': path.resolve(__dirname,'src')
        }
    }
    ...
}

eslint

todo浏览器数据暂存

源码： github项目地址

avatar
文章
阅读
粉丝