likes
comments
collection
share

webpack4.0搭建vue脚手架详解

作者站长头像
站长
· 阅读数 92

准备工作

前言

出于某些原因要完成一个demo,思考后决定搭个简单脚手架veu的spa项目来做。对于webpack基本概念(entry,output,loader,plugin,mode...)有了的认识，但是没有尝试撸过脚手架的朋友可以继续往下看。

准备工作

当然是需要node环境了

开始吧

mkdir IM-chat-vue // 创建文件项目文件夹，这边我给demo的名字就是IM-chat-vue

mkdir build //

mkdir src //

npm init // 创建package.json及其初始化 webpack4.0搭建vue脚手架详解

安装所需的依赖

npm install --save-dev vue //基于vue的那么vue必不可少...不多介绍

npm install --save-dev webpack //基于webpack的那么webpack也必不可少...不多介绍

npm install --save-dev webpack-cli //webpack version 4+ 需要下载webpack-cli(一些指令下文可能涉及到)

npm install --save-dev path //path模块提供了一些工具函数，用于处理文件与目录的路径。

npm install --save-dev html-webpack-plugin //简化了HTML文件的创建 Plugin that simplifies creation of HTML files to serve your bundles

npm install --save-dev clean-webpack-plugin //用于构建时清理构建文件夹下的内容 A webpack plugin to remove/clean your build folder(s) before building

npm install --save-dev vue-loader //Vue.js组件加载器(插件)

npm install --save-dev vue-template-compiler //对于模板的函数编译 与vue-loader 配合使用

npm install --save-dev webpack-dev-server //热更新需要搭建服务模块

npm install --save-dev style-loader css-loader //css样式处理器

必要的依赖安装完成后我们在src目录下建两个文件 app.vue；main.js

src/app.vue

<template lang="html">
    <div class='test'>
        <p class="test">IM-chat-vue  IM-chat-vue  </p>
        {{test}}
    </div>
</template>

<script>
    export default {
        data(){
            return {
                test:"简单构建vue脚手架项目"
            }
        }
    }
</script>

<style>
    .test{
        color:red;
    }
</style>

src/main.js

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

new Vue({
    el:'#app',
    render: h => h(App)
})

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>webpack app</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

到这里就把vue弄进项目了---现在我们开始配置webpack对这个vue项目进行编译打包

在刚才建好的build文件夹创建webpack.config.js及代码

const path = require('path');    //path 模块提供了一些工具函数，用于处理文件与目录的路径。
const HtmlWebpackPlugin = require('html-webpack-plugin');   //构建html文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');  // 清理构建目录下的文件
const webpack = require('webpack');       //webpack打包工具
const VueLoaderPlugin = require('vue-loader/lib/plugin');         // vue-loader 编译vue文件
module.exports = {
    mode: "development",
    entry: {       //入口
        "app": path.resolve(__dirname, "./../src/main.js")
    },
    module:{            //处理项目中的不同类型的模块。
        rules:[      // rules 各种规则(数组类型) 每个规则可以分为三部分 - 条件(condition)，结果(result)和嵌套规则(nested rule)
            {
                test:/\.css/,
                use: ['style-loader', 'css-loader']   // style-loader 和css-loader 编译css处理
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'         //vue-loader 编译vue模块
            }
        ]
    },
    devtool: 'inline-source-map',   //生曾map 映射对应代码  方便错误查询
    devServer:{
        contentBase: './dist',    // 告诉服务从哪提供代码内容(静态文件这么使用)
        hot:true    //hot模式开启
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({            // 构建html
            filename:'index.html',      //文件名
            title:'im-chat-vue',            //title
            template:'./index.html',       //参照模板样式
        }),
        new webpack.HotModuleReplacementPlugin(),  //热模块替换开启
        new VueLoaderPlugin()                 //vue-loader插件开启
    ],
    output: {        //出口
        filename: 'index.js',    //文件名
        path: path.resolve(__dirname, '../dist'),   //路径
        publicPath:""        //srcript 引入路径
    },
    resolve:{
        //引入路径是不用写对应的后缀名
        extensions: ['.js', '.vue', '.json'],
        alias:{
            //正在使用的是vue的运行时版本，而此版本中的编译器时不可用的，我们需要把它切换成运行时 + 编译的版本
            'vue$':'vue/dist/vue.esm.js',
            //用@直接指引到src目录下
            '@': path.resolve(__dirname,'./src'),
        }
    },

};

完成上述步骤后我们可以开始在package.json添加script命令

{
  "name": "im-chat-vue",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config=build/webpack.config.js"
  },
  "author": "ruindong",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "path": "^0.12.7",
    "style-loader": "^1.0.0",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

接下来执行npm run build 就编译成功了。同时生成dist文件下有如图

webpack4.0搭建vue脚手架详解

把index.html文件在浏览器上打开就如图

webpack4.0搭建vue脚手架详解

到此一个简单的编译打包vue项目的脚手架就完成了。但是这还是远远不够的。开发中我们还需要很多辅助，比如热更新。

因为上面已经在webpack.config.js配置了热更新码。所以只需要需改package.json添加启动热更新的script命令

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

接下来执行npm run dev 就热更新就编译成功了。修改代码网页上可以同步热更新了

到此一个简单的脚手架已经完成。是不是比想象中简单

现在开始做脚手架处理预编译css。以及css分离

个人喜欢用less所以这边只介绍less的loadder处理

npm install --save-dev less

npm install --save-dev less-loader; npm install extract-text-webpack-plugin --save-dev

//安装less和必须的less-loader(把它理解成less编译成css的编译器，缺它不可)；

module:{            //处理项目中的不同类型的模块。
        rules:[      // rules 各种规则(数组类型) 每个规则可以分为三部分 - 条件(condition)，结果(result)和嵌套规则(nested rule)
            {
                test:/\.css/,
                use: ['style-loader', 'css-loader']   // style-loader 和css-loader 编译css处理
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'         //vue-loader 编译vue模块
            },
            {
                test:/\.less/,
                use: ['style-loader', 'css-loader', 'less-loader'] // 编译 Less to CSS
            }
        ]
    },

npm install --save-dev extract-text-webpack-plugin //抽离css webpack4已经废弃

npm install --save-dev MiniCssExtractPlugin //使用这个抽离css

自动处理CSS3属性前缀首先需要安装两个包postcss-loader 和autoprefixer（自动添加前缀的插件）先在根目录增加postcss.config.js

// postcss.config.js
module.exports = {
    plugins: {
        'autoprefixer': {
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8"
            ]
        },
        // 'postcss-pxtorem': {
        //     rootValue: 37.5,
        //     propList: ['*']
        // } //有需要再用
    }
}

// build/webpack.config.js
const path = require('path');    //path 模块提供了一些工具函数，用于处理文件与目录的路径。
const HtmlWebpackPlugin = require('html-webpack-plugin');   //构建html文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');  // 清理构建目录下的文件
const webpack = require('webpack');       //webpack打包工具
const VueLoaderPlugin = require('vue-loader/lib/plugin');         // vue-loader 编译vue文件
//const ExtractTextPlugin = require("extract-text-webpack-plugin"); //css分离 webpack4已经不支持
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //css分离

module.exports = {
    mode: "development",
    entry: {       //入口
        "app": path.resolve(__dirname, "../src/main.js")
    },
    module:{            //处理项目中的不同类型的模块。
        rules:[      // rules 各种规则(数组类型) 每个规则可以分为三部分 - 条件(condition)，结果(result)和嵌套规则(nested rule)
            {
                test: /\.(sa|sc|le|c)ss$/,
                use: [
                    'style-loader',
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: true,
                        },
                    },
                    'css-loader',
                    'less-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            config: { path: path.resolve(__dirname, '../postcss.config.js') }
                        },
                    }
                ],
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'         //vue-loader 编译vue模块
            }
        ]
    },
    devtool: 'inline-source-map',   //生曾map 映射对应代码  方便错误查询
    devServer:{
        contentBase: path.resolve(__dirname, '../dist'),    // 告诉服务从哪提供代码内容(静态文件这么使用)
        hot:true    //hot模式开启
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({            // 构建html
            filename:'index.html',      //文件名
            title:'im-chat-vue',            //title
            template:'index.html',       //参照模板样式
        }),
        new webpack.HotModuleReplacementPlugin(),  //热模块替换开启
        new VueLoaderPlugin(),                 //vue-loader插件开启
        //new ExtractTextPlugin("index.css") //配置分离出来的css文件地址webpack4已经用不了了
        new MiniCssExtractPlugin({
            // 类似 webpackOptions.output里面的配置 可以忽略
            filename: 'css/[name].css',
            //chunkFilename: 'css/[id].css',
        })
    ],
    output: {        //出口
        filename: 'index.js',    //文件名
        path: path.resolve(__dirname, '../dist'),   //路径
        publicPath:""        //srcript 引入路径
    },
    resolve:{
        //引入路径是不用写对应的后缀名
        extensions: ['.js', '.vue', '.json'],
        alias:{
            //正在使用的是vue的运行时版本，而此版本中的编译器时不可用的，我们需要把它切换成运行时 + 编译的版本
            'vue$':'vue/dist/vue.esm.js',
            //用@直接指引到src目录下
            '@': path.resolve(__dirname,'../src'),
        }
    },

};

上面几步的操作页面css如图

webpack4.0搭建vue脚手架详解

编译后的结果如图

webpack4.0搭建vue脚手架详解

页面css已经被抽离，并且支持less。也有了自动增加浏览器前缀

处理图片路径

npm install --save-dev file-loader url-loader

webpack4.0搭建vue脚手架详解

安装babel

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

webpack4.0搭建vue脚手架详解 这边注意babel-loader 安装7.1.5版本 。默认安装的是8.0.06版本，无法兼容wp4

下一步配置脚手架环境。已经看到有伙伴给赞了。我继续更新。当前时间2019年11月5日上午9:30。 稍后更新配置环境及eslint,vue-router和状态控制器。

转载自:https://juejin.cn/post/6844903985267261454
评论
请登录