🔥手撸JS系列:手把手用webpack4搭建vue/react环境

时间  2021-08-12
标签 javascript css html vue html5 java node react webpack css3 栏目 JavaScript 繁體版
原文   原文链接

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

 

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

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

1、Webpack概述

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

2、webpack基本概念

 在深刻了解webpack以前咱们先来了解几个相关概念(知道你们懒得看，就粗略的介绍下)：
html5

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

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

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

新建个文件夹

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

用编辑器打开文件夹

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

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

内容以下

4、在目录下新建文件

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

5、磨刀霍霍敲起来

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

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前缀的东西
复制代码

6、项目运行

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

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

7、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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程