手写一个webpack4.0配置

时间  2019-11-05
标签 手写 一个 webpack4.0 webpack 配置 繁體版
原文   原文链接

确认过眼神，你仍是没有准备秋招的人？时间仓促。自京东6月8号开启管培生的招聘，就意味着秋招的开始。然而你还在等着秋天的到来？今年形势应该更为严峻，随着各大技术(vue,webpack，react，微信小程序)生态愈来愈成熟，这也意味着咱们要更加深刻的去了解他们，掌握他们。好比你写vue项目，知道vue-cli。写的项目也无以伦比，可是你是否又会去了解下vue-cli到底发生了什么？或许这就是面试官要问你的问题：请手写一个webpack4.0的配置。javascript

前言

机会老是留给有准备的人，要想在这兵荒马乱的求职季里出类拔萃，拿下你心中期待已久的offer。那么你更因该知道不少别人不知道的东西，你的羽翼才能丰满，才能翱翔于天际。鹰击长空，靠的不是天生，而是年少时断崖之险。笨鸟先飞，靠的不是智慧，而是孜孜不倦的努力。css

webpack详解

webpack是一个打包工具，他的宗旨是一切静态资源便可打包。有人就会问为何要webpack？webpack是现代前端技术的基石，常规的开发方式，好比jquery,html,css静态网页开发已经落后了。如今是MVVM的时代，数据驱动界面。webpack将现代js开发中的各类新型有用的技术，集合打包。webpack的描述铺天盖地，我就不浪费你们的时间了。理解下这种图就知道webpack的生态圈了: html

webpack

webpack4.0的配置

const path = require('path');  //引入node的path模块
const webpack = require('webpack'); //引入的webpack,使用lodash
const HtmlWebpackPlugin = require('html-webpack-plugin')  //将html打包
const ExtractTextPlugin = require('extract-text-webpack-plugin')     //打包的css拆分,将一部分抽离出来  
const CopyWebpackPlugin = require('copy-webpack-plugin')
// console.log(path.resolve(__dirname,'dist')); //物理地址拼接
module.exports = {
    entry: './src/index.js', //入口文件  在vue-cli main.js
    output: {       //webpack如何输出
        path: path.resolve(__dirname, 'dist'), //定位，输出文件的目标路径
        filename: '[name].js'
    },
    module: {       //模块的相关配置
        rules: [     //根据文件的后缀提供一个loader,解析规则
            {
                test: /\.js$/,  //es6 => es5 
                include: [
                    path.resolve(__dirname, 'src')
                ],
                // exclude:[], 不匹配选项（优先级高于test和include）
                use: 'babel-loader'
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                    'css-loader',
                    'less-loader'
                    ]
                })
            },
            {       //图片loader
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader' //根据文件地址加载文件
                    }
                ]
            }
        ]                  
    },
    resolve: { //解析模块的可选项  
        // modules: [ ]//模块的查找目录 配置其余的css等文件
        extensions: [".js", ".json", ".jsx",".less", ".css"],  //用到文件的扩展名
        alias: { //模快别名列表
            utils: path.resolve(__dirname,'src/utils')
        }
    },
    plugins: [  //插进的引用, 压缩，分离美化
        new ExtractTextPlugin('[name].css'),  //[name] 默认  也能够自定义name  声明使用
        new HtmlWebpackPlugin({  //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上，项目包。能够直接上线
            file: 'index.html', //打造单页面运用 最后运行的不是这个
            template: 'src/index.html'  //vue-cli放在跟目录下
        }),
        new CopyWebpackPlugin([  //src下其余的文件直接复制到dist目录下
            { from:'src/assets/favicon.ico',to: 'favicon.ico' }
        ]),
        new webpack.ProvidePlugin({  //引用框架 jquery  lodash工具库是不少组件会复用的，省去了import
            '_': 'lodash'  //引用webpack
        })
    ],
    devServer: {  //服务于webpack-dev-server  内部封装了一个express 
        port: '8080',
        before(app) {
            app.get('/api/test.json', (req, res) => {
                res.json({
                    code: 200,
                    message: 'Hello World'
                })
            })
        }
    }
    
}
复制代码

1、前端环境搭建

咱们使用npm或yarn来安装webpack前端

npm install webpack webpack-cli -g 
# 或者 
yarn global add webpack webpack-cli
复制代码

为何webpack会分为两个文件呢？在webpack3中，webpack自己和它的cli之前都是在同一个包中，但在第4版中，他们已经将二者分开来更好地管理它们。vue

新建一个webpack的文件夹，在其下新建一个try-webpack(防止init时项目名和安装包同名)并初始化和配置webpack。java

npm init -y  //-y 默认全部的配置
 yarn add webpack webpack-cli -D  //-D webpack安装在devDependencies环境中
复制代码

2、部署webpack

在上面搭建好的环境项目中，咱们来到package.json里配置咱们的scripts,让webpacknode

"scripts": {
    "build": "webpack --mode production" //咱们在这里配置，就可使用npm run build 启动咱们的webpack
  },
  "devDependencies": {
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  }
复制代码

配置好咱们webpack的运行环境时，联想下vue-cli。平时使用vue-cli会自动帮咱们配置并生成项目。咱们在src下进行项目的开发，最后npm run build 打包生成咱们的dist的目录。不知道你是否还记得，仍是让咱们进入下一节让咱们感觉下这其中的正个流程吧。react

3、npm run build 发生了什么

在咱们的根项目下try-webpack新建一个src目录。在src目录下新建一个index.js文件。在里面咱们能够写任意的代码，以案例为主:jquery

const a = 1;webpack

写完以后咱们在终端运行咱们的命令 npm run build；你就会发现新增了一个dist目录，里面存放着webpack打包好的main.js文件。这和咱们在vue-cli里操做是同样的。

4、webpackp配置流程篇

咱们在开发是通常会打包src下的什么文件呢？咱们能够回忆一下，其实vue-cli项目src下不就这几点嘛：

  • 发布时须要的html，css，js
  • css预编译器stylus，less，sass
  • es6的高级语法
  • 图片资源.png，.gif，.ico，.jpg
  • 文件间的require
  • 别名@等修饰符

那么我将会分这几点来说解webpack中webpack.config.js的配置，跟着脚步，一步一步的来完成咱们的流程线。

✍️Html在webpack中的配置

在项目的根目录try-webpack下新建webpack.config.js文件，以commonJS模块化机制向外输出,而且新建一个index.html。

module.exports = {}

配置咱们的入口entry，在vue-cli里至关于跟目录下的main.js，咱们的出口output。咱们能够把webpack理解为一个工厂，进入至关于把各类各样的原料放进咱们的工厂了，而后工厂进行一系列的打包操做把打包好的东西，向外输出，而后就能够去出售了(上线)。

const path = require('path'); //引入咱们的node模块里的path
//测试下 console.log(path.resolve(__dirname,'dist')); //物理地址拼接
module.exports = {
    entry: './src/index.js', //入口文件  在vue-cli main.js
    output: {       //webpack如何向外输出
        path: path.resolve(__dirname, 'dist'),//定位，输出文件的目标路径
        filename: '[name].js' //文件名[name].js默认，也可自行配置
    },
复制代码

HTML打包咱们须要安装引入html-webpack-plugin

yarn add html-webpack-plugin -D //在开发环境中安装
const HtmlWebpackPlugin = require('html-webpack-plugin')  //引入打包咱们的HTML
复制代码

在module.exports里配置咱们的plugins(插件):

plugins: [  //插进的引用, 压缩，分离美化
        new HtmlWebpackPlugin({  //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上，项目包。能够直接上线
            file: 'index.html', //打造单页面运用 最后运行的不是这个
            template: 'src/index.html'  //vue-cli放在跟目录下
        }),
    ],
复制代码

配置好后，在终端输入npm run dev后webpack将咱们的html打包好而且自动将咱们的js引进来了。

<body>
    <p class="main">Hello World</p>
<script type="text/javascript" src="main.js"></script>
</body>
复制代码

live-sever咱们的dist目录，启动一个8080端口，咱们就能够看到咱们的Hello World了。这就是咱们上线版的页面。

🍉css在webpack中的配置

在咱们vue-cli里，咱们可使用css去写咱们的样式，也可使用高级stylus，less，sass等预编译器。这里就以less为例，看看webpack怎么将他打包成一个css。

.main {
  color: red;
}
复制代码

在src目录下新建咱们的style.less文件，在配置以前咱们须要npm咱们的css-loader和sass-loader， sass

yarn add css-loader less less-loader style-loader -D

执行完上述命令咱们在packge.json里能够看到咱们的配置文件

"devDependencies": {
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "sass": "^1.9.0",
    "sass-loader": "^7.0.3",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  }
复制代码

安装好后，咱们开始配置webpack.config.js文件。这里申明一下，咱们的css在dist目录下须要和咱们的HTML分离，这是还需引入咱们的extract-text-webpack-plugin，先然咱们安装下

yarn add extract-text-webpack-plugin -D

这里有一个坑，extract-text-webpack-plugin在4.0并不支持这样的安装，你们可自行chrome。因而咱们选择换一种方式,选择4.00-beta.0版本的

yarn add extract-text-webpack-plugin@last -D

来到咱们的module.exports里，完成moudel的配置

const ExtractTextPlugin = require('extract-text-webpack-plugin')     //打包的css拆分,将一部分抽离出来  
 module: {       //模块的相关配置
      rules: [     //根据文件的后缀提供一个loader,解析规则
          {
              test: /\.less$/, //正则匹配咱们以.less结尾的文件
              use: ExtractTextPlugin.extract({
                  fallback: 'style-loader',
                  use: [
                  'css-loader',
                  'less-loader'
                  ]
              })
          },
      ]},
   plugins：[
      new ExtractTextPlugin('[name].css'),  //[name] 默认  也能够自定义name  声明使用
   ]
复制代码

咱们在执行咱们的npm run build以后并无咱们的css,为何呢？原来在webpack配置里css in js。意思是在打包是咱们的css是打包在咱们的js里的，全部咱们引入了extract-text-webpack-plugin插件将css从里面剥离出来。不过又一个问题，require的机制？

在咱们打包过程当中，文件的引用require 按照顺序来打包，这就是文件依赖的机制。

打包好后咱们在live-server，发现咱们的样式也上去了，而且css部分分离出来了。

🍊js在webpack中的配置

如今随着es6的普及，愈来愈多的代码使用es6了，可是不少浏览器并不支持es6,好比async/awiat，const。所以须要咱们引用babe来把咱们es6的代码编译为es5。在跟目录下新建.babelrc,简单配置下

{"presets": ["env"]}

安装咱们的babel并在webpack.config.js里module/rules下进行配置

yarn add babel-loader babel-core  abel-preset-env -D  //babel基本的三个文件
 {
    test: /\.js$/,  //es6 => es5 
    include: [
        path.resolve(__dirname, 'src')
    ],
    // exclude:[], 不匹配选项（优先级高于test和include）
    use: 'babel-loader'
},
复制代码

🥕图片资源在webpack中的配置

在src目录下新建一个assets文件，里面放置几张图片。安装file-loader根据文件地址加载文件

yarn add file-loader -D 在webpack.config.js里module/rules

{  
    test: /\.(png|jpg|gif)$/, //匹配全部格式的图片资源
    use: [
        {
            loader: 'file-loader' 
        }
    ]
}
复制代码

🍌别名(@)在webpack中的配置

在src/index.js里咱们引入

const format = require('utils/format')  // utils ?  没有相对路径  回想@  => 别名
在src新建相应的文件。在format.js里接受一个参数并把它转成大写
module.exports = function format(chars) {
    return chars.toUpperCase()
}

复制代码

在webpack中如何配置咱们的别名呢？在vue-cli中咱们常常@一个文件夹，其意思就是在src目录下，如今咱们去一探究竟。在module下,注意跟rules同级

resolve: { //解析模块的可选项  
        // modules: [ ]//模块的查找目录 配置其余的css等文件
        extensions: [".js", ".json", ".jsx",".less", ".css"],  //用到文件的扩展名
        alias: { //模快别名列表
            utils: path.resolve(__dirname,'src/utils')
        }
    },
复制代码

🍒其余一些静态资源在webpack中的配置

  • src下其余的文件直接复制到dist目录下，并非每一个文件都须要打包处理的，不少资源可能直接就能够复制过去。使用咱们的 CopyWebpackPlugin插件
  • 引用框架 jquery lodash工具库是不少组件会复用的，省去了import。使用webpack.ProvidePlugin插件

5、npm run dev 发生了什么

在vue-cli中咱们启动监听npm run dev能够时时监控咱们src下文件的改动，那他到底发生了什么呢。在webpack里其实建立了一个node进程，经过webpack-dev-server其内部封装了一个node的express模块,其配置项以下

"scripts": { //在package.json里声明下使用脚本 npm run dev
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development"
  }, 
devServer: {  //在webpack.config.js里配置port
        port: '8080',
        before(app) {
            app.get('/api/test.json', (req, res) => {
                res.json({
                    code: 200,
                    message: 'Hello World'
                })
            })
        }
    }  //服务于webpack-dev-server  内部封装了一个express 
复制代码

fitting

寄语

webpack里面博大精深，这只是刚入门。要研究其里面真正的东西，并不是一朝一夕。tapable、webpack的生命周期等等。若是你想深刻的理解webpack，推荐腾讯ivweb团队关于webpack的深刻研究。这也是我最近在看的，只有理解更多，你才能飞的更远。夜深了，时间过的很快。楼主也太困了，停笔于此，望多多包涵。附上我github关于webpack4.0配置的学习demo点这里。

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