Created By JishuBao on 2019-03-06 12:38:22
Recently revised in 2019-03-08 12:38:22

欢迎大家来到技术宝的掘金世界,您的star是我写文章最大的动力！GitHub地址

开篇点题:
这是一篇使用webpack4搭建vue/react环境的文章，会详细的介绍每个插件的作用等...
感觉不错的小伙伴，点赞star走一波;
感觉文章有误的小伙伴，评论区、QQ群走一波；
虚心求教，不胜感激~

一、Webpack概述

webpack是模块化管理工具，使用webpack可以对模块进行压缩、预处理、按需打包、按需加载等。

二、webpack基本概念

在深入了解webpack之前我们先来了解几个相关概念(知道大家懒得看，就粗略的介绍下)：

Entry:入口，Webpack执行构建的第一步将从Entry开始，可抽象成输入。
Module:模块，在Webpack里一切皆模块，一个模块对应着一个文件。webpack会从配置的Entry开始递归找出所有依赖的模块。
Chunk:代码块，一个Chunk由多个模块组合而成，用于代码合并与切割。
Loader:模块转换器，用于把模块原内容按照需求转换成新内容。
Plugin:扩展插件,在Webpack构建流程中的特定时机会广播出对应的时间，插件可以监听这些事件的发生,在特定时机做对应的事情。

三、webpack实操(小白入门级别)

肯定有小伙伴们百度过其他的文章，也肯定遇到过只夸夸而谈而不实际操作的博主，或者一些博主只是粗略的一笔带过，导致大家啥也没有收获，越看越迷糊，本文与那些不负责任的博主是不一样的(开个玩笑)，本文真刀真枪，实际操作，带小伙伴从零开始手动搭建一个webpack的开发环境，精细到新建文件夹级别(手动滑稽)，争取每一行代码大家看的见、理解的透彻！！

新建个文件夹

首先新建一个文件夹，技术宝喜欢在E盘的MyProject目录下新建文件夹，取名叫做WebpackofVueStage，如下图所示：

用编辑器打开文件夹

使用编辑器打开文件夹，我在这里使用的是VSCODE,这是微软推出的一款编辑器，非常好用，建议小伙伴们都可以来试试看哦~，如下图所示：

在vscode终端中打开这个文件夹，即在这个文件夹下打开所在命令行，输入`npm init`，会生成一个`package.json`文件

内容如下

四、在目录下新建文件

在主目录下新建build目录存放webpack相关配置文件、src目录存放源码目录包括资源文件、js、css文件等...,目录结构入下图所示，文件均为空，技术宝将带着大家一行行代码实现这"宏伟"的项目。

五、磨刀霍霍敲起来

webpack相关文件的代码编写：此处将webpack文件分为三个文件

1.webpack.base.conf.js(基础代码的编写)

const path=require('path');
//利用require导入了node中path模块,path模块了一些处理文件路径的小工具，由于webpack是基于Node环境下的工具，所以可以直接使用node原生模块path

const SRC_PATH=path.resolve(__dirname,"../src")
//path.resolve()方法可以将路径或者路径片段解析成绝对路径，具体可以结合官方文档进行查看,综合来看，path.resolve()是一个修改和整合文件路径的方法，dirname是directory+name的缩写，故名思义，是文件名的意思。总的来说就是将绝对路径提取出来

entry:{
    main:'./src/index.js'
}
//入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的

本文以vue为例，首先安装需要安装的依赖包

npm install vue -S
//-S即-save的缩写，包会写入dependencies，-D或者--save-d会写入devDepencies中

npm install webpack webpack-cli webpack-dev-server webpack-merge --save-dev
//webpack-cli是 webpack 的命令行工具。让我们可以不用写打包脚本，只需配置打包配置文件，然后在命令行输入 webpack-cli --config webpack.config.js 来使用 webpack, 简单很多。webpack 4 之前命令行工具是集成在 webpack 包中的，4.0 开始 webpack 包本身不再集成 cli。webpack-dev-server用于开发调试，它提供了web服务、热更新、接口代理等支持。webpack-merge提供了一个merge连接数组并合并创建新对象的对象的函数。如果遇到函数，它将执行它们，通过算法运行结果，然后再次将返回的值包装在函数中。

resolve:{
        extensions:['.vue','.js'],
        alias:{
            '@':SRC_PATH
        }
},
//Resolve 配置 Webpack 如何寻找模块所对应的文件,extensions:在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试访问文件是否存在。alias: 配置项通过别名来把原导入路径映射成一个新的导入路径。

module:{
        rules:[
            {
                test:/\.vue$/,//通过loader来预处理文件 允许你打包除了js之外的任何静态资源
                use:'vue-loader'
            },
            {
                test:/\.js?$/,
                use:'babel-loader',
                //排除node_modules目录下的文件
                exclude:/node_modules/,
                include:SRC_PATH
            },
            {
                test:/\.(woff|svg|eot|woff2|tff)$/,
                use:[
                    {
                        loader:'url-loader',
                        include: [resolve('src')],
                        options:{
                            limit:10000
                        }
                    }
                ],
                exclude:/node_modules/,
            }
        ]
    },

如上：需要安装图示对应的loader

 npm install vue-loader babel-loader url-loader --save-dev
//rules是module的属性，指定模块解析规则，而use是每一个rule的属性，指定要用什么loader。vue-loader：解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理。babel-loader用于将ES6转化为ES5等功能。url-loader他可以将html以及css中的图片打包成base64，但是js中如果有图片url并不能编译成功。用于减少http请求实现性能优化。

当使用vue-loader时，请确保您已经引入vue的插件

const VueLoaderPlugin = require('vue-loader/lib/plugin');
plugins:[
        new VueLoaderPlugin(),
        //它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块。
]

至此基础webpack文件已经搭建好，以下是webpack.base.conf.js的完整代码：

const path=require('path');
//path是node.js的一个模块，提供了一些用于处理文件路劲的小工具
const SRC_PATH=path.resolve(__dirname,"../src");
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports={
    entry:{
        main:"./src/index.js"//入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的
    },
    resolve:{
        extensions:['.vue','.js'],
        alias:{
            '@':SRC_PATH
        }
    },
    module:{
        rules:[
            {
                test:/\.vue$/,//通过loader来预处理文件 允许你打包除了js之外的任何静态资源
                use:'vue-loader'
            },
            {
                test:/\.js$/,
                use:'babel-loader',
                //排除node_modules目录下的文件
                exclude:/node_modules/,
                include:SRC_PATH
            },
            {
                test:/\.(woff|svg|eot|woff2|tff)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:10000
                        }
                    }
                ],
                exclude:/node_modules/,
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
        //它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块。
    ]

}

2.webpack.dev.conf.js的编写(开发环境)

const webpack=require('webpack');
//require工作原理:首先确定是否是一个原生的模块,如果不是就进入node_modules查找,再看是否在package.json的main里面定义。

const merge=require('webpack-merge');
//webpack-merge提供了一个merge连接数组并合并创建新对象的函数。

const baseWebpackConfig=require('./webpack.base.conf.js');
//引入基础webpack设置。

const HtmlWebpackPlugin=require('html-webpack-plugin');
//这是一个webpack插件，可以简化HTML文件的创建，为您的webpack捆绑服务提供服务。这对于webpack在文件名中包含哈希的包很有用，这些哈希值会更改每个编译。基本作用就是生成HTML。

const derServerPort=10000;
//开发环境的端口号。

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
//识别某些类别的webpack错误，并清理，聚合和优先级，以提供更好的开发人员体验。(友好的提示插件)。

npm install friendly-errors-webpack-plugin html-webpack-plugin --save-dev
//安装上述代码所需要的依赖

mode:'development'
//开发环境,会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin

devtool:'cheap-module-eval-source-map'
//不带列映射(column-map)的 SourceMap，将加载的 Source Map 简化为每行单独映射。.

module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    {loader:"style-loader"},
                    {loader:"css-loader"},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.(sc|sa)ss$/,
                use:[
                    {loader:"style-loader"},
                    {loader:"css-loader"},
                    {loader:"sass-loader"},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.less$/,
                use:[
                    {loader:"style-loader"},
                    {loader:"css-loader"},
                    {loader:"less-loader"},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)$/,
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            limit:10000,
                        }
                    }
                ]
            }
        ]
    },
//直接来说是把对应后缀名转化为css文件

npm install style-loader css-loader sass-loader less-loader postcss-loader file-loader --save-dev
//使用style-loader通过注入<style>标记将CSS添加到DOM。css-loader 解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们。sass-loader:将 Sass 编译成 CSS。less-loader:将less转化为css。postcss-loadercss3属性已经给加上了浏览器前缀,file-loader与file-loader类似。

devServer:{
        port:derServerPort,//指定要监听请求的端口号
        overlay:{//当编译器存在错误或警告时,将浏览器显示全屏覆盖
            warnings:false,
            errors:true,
        },
        host:"localhost",
        open:true,//开发服务器将打开浏览器
        noInfo:true,//那些显示的 webpack 包(bundle)信息」的消息将被隐藏。错误和警告仍然会显示。
        https:false,
        hot:true,//启用webpack的模块热更新
        compress:true,//一切服务都启用gzip压缩
        progress:true,//将任务进度输出到控制台
        quiet:true,
        useLocalIp:false,//此选项允许浏览器使用你的本地ip打开
        proxy:{//代理服务器
            "/api":{
                target:"http://localhost:8080",
                changeOrigin:true,
                pathRewrite:{"^api":"/api"}
            }
        }
    },
    //以上为webpack开发模式下的代码片段

plugins:[
        //处理html
        new HtmlWebpackPlugin({
            template:'src/public/index.html',//开发环境需要路径
            inject:'body',//所有javascript资源将被放置在body元素的底部
            minify:{
                html5:true,
                collapseWhitespace: true, //把生成的 index.html 文件的内容的没用空格去掉，减少空间
            },
            title:'基于vue的webpack4教手架项目 准备在项目中采用vue-router、vuex、vant等技术(development开发环境)',
            hash:true,
            favicon:'src/assets/favicon-shield.ico',//将给定的favicon路径添加到输出HTML
            showErrors:true,
        }),
        //热更新
        new webpack.HotModuleReplacementPlugin(),
        new FriendlyErrorsWebpackPlugin({
            compilationSuccessInfo: {
                messages: [`You application is running here http://localhost:${derServerPort}`],
                notes: ['Some additionnal notes to be displayed unpon successful compilation']
            },
            onErrors: function (severity, errors) {},
            clearConsole: true,
            additionalFormatters: [],
            additionalTransformers: []
        }),
        new webpack.LoaderOptionsPlugin({
            options:{
            }
        })
    ]
    //开发环境下的插件配置

至此开发环境下的webpack已搭好，webpack.dev.conf.js文件完整代码如下：

const webpack=require('webpack');
//require工作原理:首先确定是否是一个原生的模块,如果不是就进入node_modules查找,再看是否在package.json的main里面定义。
const merge=require('webpack-merge');
//webpack-merge提供了一个merge连接数组并合并创建新对象的函数
const baseWebpackConfig=require('./webpack.base.conf.js');
//引入基础webpack设置
const HtmlWebpackPlugin=require('html-webpack-plugin');
const derServerPort=10000;
//基本作用就是生成html文件
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
//友好的提示

module.exports=merge(baseWebpackConfig,{
    mode:'development',//开发环境,会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin
    devtool:'cheap-module-eval-source-map',//不带列映射(column-map)的 SourceMap，将加载的 Source Map 简化为每行单独映射。
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    {loader:"style-loader"},
                    {loader:"css-loader"},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.(sc|sa)ss$/,
                use:[
                    {loader:"style-loader"},
                    {loader:"css-loader"},
                    {loader:"sass-loader"},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.less$/,
                use:[
                    {loader:"style-loader"},
                    {loader:"css-loader"},
                    {loader:"less-loader"},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)$/,
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            limit:10000,
                        }
                    }
                ]
            }
        ]
    },
    devServer:{
        port:derServerPort,//指定要监听请求的端口号
        overlay:{//当编译器存在错误或警告时,将浏览器显示全屏覆盖
            warnings:false,
            errors:true,
        },
        host:"localhost",
        open:true,//开发服务器将打开浏览器
        noInfo:true,//那些显示的 webpack 包(bundle)信息」的消息将被隐藏。错误和警告仍然会显示。
        https:false,
        hot:true,//启用webpack的模块热更新
        compress:true,//一切服务都启用gzip压缩
        progress:true,//将任务进度输出到控制台
        quiet:true,
        useLocalIp:false,//此选项允许浏览器使用你的本地ip打开
        proxy:{//代理服务器
            "/api":{
                target:"http://localhost:8080",
                changeOrigin:true,
                pathRewrite:{"^api":"/api"}
            }
        }
    },
    plugins:[
        //处理html
        new HtmlWebpackPlugin({
            template:'src/public/index.html',//开发环境需要路径
            inject:'body',//所有javascript资源将被放置在body元素的底部
            minify:{
                html5:true,
                collapseWhitespace: true, //把生成的 index.html 文件的内容的没用空格去掉，减少空间
            },
            title:'基于vue的webpack4教手架项目 准备在项目中采用vue-router、vuex、vant等技术(development开发环境)',
            hash:true,
            favicon:'src/assets/favicon-shield.ico',//将给定的favicon路径添加到输出HTML
            showErrors:true,
        }),
        //热更新
        new webpack.HotModuleReplacementPlugin(),
        new FriendlyErrorsWebpackPlugin({
            compilationSuccessInfo: {
                messages: [`You application is running here http://localhost:${derServerPort}`],
                notes: ['Some additionnal notes to be displayed unpon successful compilation']
            },
            onErrors: function (severity, errors) {},
            clearConsole: true,
            additionalFormatters: [],
            additionalTransformers: []
        }),
        new webpack.LoaderOptionsPlugin({
            options:{
                // postcss:[
                //     require('postcss-plugin-px2rem')({
                //         rootValue:75,
                //         selectorBlackList:['html'],
                //         mediaQuery:true,
                //         propBlackList:['75px']
                //     })
                // ],
            }
        })
    ]
});

3.webpack.prod.conf.js代码的编写(生产环境)

与上文中代码相同不再赘述

const path=require('path');
const DIST_PATH=path.resolve(__dirname,"../dist");
const CleanWebpackPlugin=require('clean-webpack-plugin');
//打包之前清除文件

const BundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
//分析打包后的包体积大小等

const MiniCssExtractPlugin=require('mini-css-extract-plugin');
//分离css

 mode:"production"
 //会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

output:{
        filename:"js/[name].[hash].js",
        path:DIST_PATH
},

module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    {loader:'css-loader'},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.(sc|sa)ss$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    {loader:'css-loader'},
                    {loader:"sass-loader"},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.less$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    {loader:'css-loader'},
                    {loader:'less-loader'},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)$/,
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            limit:10000,
                            name:"[hash].[ext]",
                            outputPath:"images/"
                        }
                    }
                ]
            }
        ]
    },
    //与开发模式下基本相同,MiniCssExtraPlugin插件分离css文件

plugins:[
        new CleanWebpackPlugin(['dist'],{root:path.resolve(__dirname,'../'),verbose:true}),//每次打包前清除dist
        new HtmlWebpackPlugin({
            //将目录下的index.html引进生成的dist中的index.html
            template:'src/public/index.html',
            title:'基于vue的webpack4教手架项目 准备在项目中采用vue-router、vuex、vant等技术(product生产环境)',
            favicon:'src/assets/favicon-shield.ico',
            minify:{
                removeComments:true,
                collapseWhitespace:true,
                removeAttributeQuotes:true
            },
            
        }),
        new BundleAnalyzerPlugin({//打包分析
            analyzerPort:10000,
            openAnalyzer:true,
        }),
        new MiniCssExtractPlugin({//分离css
            filename:"css/[name].[chunkhash:8].css",
            chunkFilename:"css/[id].[hash]css"
        })
    ]

至此webpack生产环境已经搭建完成，完整代码如下：

const merge=require('webpack-merge');
const baseWebpackConfig=require('./webpack.base.conf.js');
const webpack=require('webpack');
const path=require('path');
const DIST_PATH=path.resolve(__dirname,"../dist");
//打包之前清除文件
const CleanWebpackPlugin=require('clean-webpack-plugin');
const HtmlWebpackPlugin=require('html-webpack-plugin');
//打包的时候分析包大小等
const BundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
//分离css
const MiniCssExtractPlugin=require('mini-css-extract-plugin');

module.exports=merge(baseWebpackConfig,{
    mode:"production",//会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.
    devtool:'cheap-module-source-map',//不带列映射(column-map)的 SourceMap，将加载的 Source Map 简化为每行单独映射。
    output:{
        filename:"js/[name].[hash].js",
        path:DIST_PATH
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    {loader:'css-loader'},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.(sc|sa)ss$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    {loader:'css-loader'},
                    {loader:"sass-loader"},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.less$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    {loader:'css-loader'},
                    {loader:'less-loader'},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)$/,
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            limit:10000,
                            name:"[hash].[ext]",
                            outputPath:"images/"
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(['dist'],{root:path.resolve(__dirname,'../'),verbose:true}),//每次打包前清除dist
        new HtmlWebpackPlugin({
            //将目录下的index.html引进生成的dist中的index.html
            template:'src/public/index.html',
            title:'基于vue的webpack4教手架项目 准备在项目中采用vue-router、vuex、vant等技术(product生产环境)',
            favicon:'src/assets/favicon-shield.ico',
            minify:{
                removeComments:true,
                collapseWhitespace:true,
                removeAttributeQuotes:true
            },
            
        }),
        new BundleAnalyzerPlugin({//打包分析
            analyzerPort:10000,
            openAnalyzer:true,
        }),
        new MiniCssExtractPlugin({//分离css
            filename:"css/[name].[chunkhash:8].css",
            chunkFilename:"css/[id].[hash]css"
        })
    ]
});

src相关文件的代码编写

如上述，我们已经完成了与webpack相关的代码编写。接下来就是源码相关的编写了在上面敲的代码中我们会发现例如index.js、index.html等都未进行代码的编写，接下来我们就要完善这部分的代码。Are you ready?

1.首先准备css图标图片favicon-shield.ico(ico后缀是图表图片格式),放入assets文件夹

2.index.html模板文件的编写，放入public文件夹下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

3.入口文件index.js的编写，放入src根目录下：

import Vue from 'vue';
//在import Vue的过程中Vue主要是在原型上完成方法的挂载，并且初始化了全局的API。
import App from './App.vue';//引入vue页面(稍候书写)
import './styles/reset.css';//引入样式重置

Vue.config.productionTip=false;//阻止启动生产消息，常用作指令

new Vue({
    el:"#root",//将渲染结果挂在这id为root的html上
    render:h=>h(App),//render函数是渲染一个视图，然后提供给el挂载，如果没有render那页面什么都不会出来
});

解析vue template 标签要安装制定依赖

npm install vue-template-compiler --save-dev

4.在src目录下编写app.vue页面

<template>
    <div class="container"><span>{{msg}}</span></div>
</template>

<script>
export default {
    data(){
        return{
            msg:'webpack4搭建react环境基本完成，是不是很简单呢'
        }
    }
}
</script>

<style>
.container{
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:20px;
    color:red;
    box-shadow:5px 5px 5px 5px;
}
</style>

5.编写样式文件reset.css

/* 
  * reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
  * The purpose of reset is not to allow default styles to be consistent across all browsers, but to reduce the potential problems of default styles.
  * create by jsliang
*/

/** 清除内外边距 - clearance of inner and outer margins **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* 结构元素 - structural elements */
dl, dt, dd, ul, ol, li, /* 列表元素 - list elements */
pre, /* 文本格式元素 - text formatting elements */
form, fieldset, legend, button, input, textarea, /* 表单元素 - from elements */
th, td /* 表格元素 - table elements */ {
  margin: 0;
  padding: 0;
}

/*默认初始化样式*/
body{
  margin:0;padding:0;font-size:"微软雅黑";box-sizing: border-box;
}

body,html{
  text-size-adjust: none;/*文本不会随着设备尺寸的变化而变化*/
  width:100%;
  height:100%;
}

*{text-decoration: none;list-style:none;}

img{border:0px;}

/** 设置默认字体 - setting the default font **/
body, button, input, select, textarea {
  font: 18px/1.5 '黑体', Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, button, input, select, textarea { font-size: 100%; }

/** 重置列表元素 - reset the list element **/
ul, ol { list-style: none; }

/** 重置文本格式元素 - reset the text format element **/
a, a:hover { text-decoration: none; }

/** 重置表单元素 - reset the form element **/
button { cursor: pointer; }
input { font-size: 18px; outline: none; }

/** 重置表格元素 - reset the table element **/
table { border-collapse: collapse; border-spacing: 0; }

/** 图片自适应 - image responsize **/
img { border: 0; display: inline-block; width: 100%; max-width: 100%; height: auto; vertical-align: middle; }

/* 
    * 默认box-sizing是content-box，该属性导致padding会撑大div，使用border-box可以解决该问题
    * set border-box for box-sizing when you use div, it solve the problem when you add padding and don't want to make the div width bigger
*/
div, input { box-sizing: border-box; }

/** 清除浮动 - clear float **/
.jsbao-clear:after, .clear:after {
  content: '\20';
  display: block;
  height: 0;
  clear: both;
}
.jsbao-clear, .clear {
  *zoom: 1;
}

/** 设置input的placeholder - set input placeholder **/
input::-webkit-input-placeholder { color: #919191; font-size: .26rem } /* Webkit browsers */
input::-moz-placeholder { color: #919191; font-size: .26rem } /* Mozilla Firefox */
input::-ms-input-placeholder { color: #919191; font-size: .26rem } /* Internet Explorer */

6.配置package.json文件

npm install cross-env --save-dev
//解决webpack命令设置node_env=development无反应等 可跨平台使用

在package.json中的scripts标签中写入

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env webpack-dev-server --config build/webpack.dev.conf.js",
    "build": "cross-env webpack --config build/webpack.prod.conf.js"
 },

7.关于babel

大家都知道babel在编程中的重要性,当然搭建Vue环境也是不可缺少的,让我们看看常用的babel都有哪些呢(新版本已出,本文全线升级成babel 7.x以上)

@babel/core:@babel/core的作用是把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理。

npm install @babel/core@7.1.2 --save-dev

@babel/plugin-proposal-class-properties的作用是把es6的类转化为浏览器可读的

npm install @babel/plugin-proposal-class-properties@7.1.0 --save-dev

@babel/plugin-proposal-decorators的作用是把装饰器转为为未浏览器可读的

npm install @babel/plugin-proposal-decorators@7.1.6 --save-dev

@babel/plugin-proposal-function-bind的作用是把：：作用于绑定符转化未浏览器可读的

npm install @babel/plugin-proposal-function-bind@7.0.0 --save-dev

@babel/plugin-syntax-dynamic-import的作用是支持promise和数组的迭代相关的方法

npm install @babel/plugin-syntax-dynamic-import@7.0.0 --save-dev

@babel/plugin-transform-runtime的作用会自动polyfill es5不支持的特性

npm install @babel/plugin-transform-runtime@7.1.0 --save-dev

@babel/polyfill:这个库将会模拟一个完全的 ES2015+ 的环境。这意味着你可以使用新的内置语法比如 promise 或者 WeakMap，静态方法比如Array.from 或 Object.assign, 实例方法比如 Array.prototype.includes 和 generator 函数。

npm install @babel/polyfill@7.2.5 --save-dev

@babel/preset-env是一个智能预设，允许您使用最新的JavaScript，

npm install @babel/preset-env@7.1.6 --save-dev

@babel/preset-react:转化react中jsx的写法

npm install @babel/preset-react@7.0.0 --save-dev

@babel/preset-stage-0:同env

npm install @babel/preset-stage-0@7.0.0 --save-dev

@babel/runtime:同@babel/polyfill

npm install @babel/runtime@7.2.0 --save-dev

安装了这些babel以后，需要有个文件进行标识，src目录下新建.babelrc

{
    "presets":[
        ["@babel/preset-env", {
            "modules": false,
            "targets": {
              "browsers": ["> 1%", "last 2 versions", "ie >= 10"]
            },
            "useBuiltIns": "usage"
        }],
        "@babel/preset-react"
    ],
    "plugins":[
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties",{"loose":true}],
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-function-bind",
        "@babel/plugin-syntax-dynamic-import"
    ]
}

8.关于外部postcss.config.js的设置

因为你在loader 中引用了插件，但是没有指明是谁的插件，需要制定一个ident，唯一标识。
src目录下新建postcss.config.js文件

//自动添加css兼容属性
module.exports = {
    plugins: [
        require('autoprefixer')({
            "browsers": [
                "defaults",
                "not ie < 11",
                "last 2 versions",
                "> 1%",
                "iOS 7",
                "last 10 versions"
            ]
        })
    ]
};

npm install autoprefixer --save-dev
//，就是自动补全css前缀的东西

六、项目运行

是不是和我一样看的很累呢，第一次写文章很多地方没有特别注意，希望下次可以越来越好吧 **扯了那么多，不看效果等于耍流氓！！！ 命令行执行npm run start/npm start 浏览器会自动弹出，建议你用谷歌(手动滑稽)
效果图：

还是特别的丑只有一行字且垂直居中不过咱们主要目的不是为了搭建webpack嘛！！！觉得此篇文章对你有用的画不要忘了给我的git一个赞哦！！！

七、webpack运行原理

Webpack的运行流程是一个串行的过程，从开始到结束后回依次执行以下流程：

流程概括:

1.初始化参数：从配置文件和shell语句中读取与合并参数，得出最终的参数
2.开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
3.确定入口：根据配置中的 entry 找出所有的入口文件；
4.编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
5.完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
6.输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
7.输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

流程细节:

Webpack 的构建流程可以分为以下三大阶段：

初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler。
编译：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理。
输出：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统。

如果只执行一次构建，以上阶段将会按照顺序各执行一次。但在开启监听模式下，流程将变为如下：

如果你觉得我的文章还不错的话，可以给个star哦~，GitHub地址

下一步计划是用Vue-router+Vuex+Vant写一个简易demo