目 录CONTENT

文章目录

webpack基础配置

Administrator
2020-07-24 / 0 评论 / 0 点赞 / 12137 阅读 / 85550 字

webpack基础配置

WebPack是目前前端用于构建自动化开发的一款非常流行的工具,与之前的gulp和grunt功能非常相似,它们都是一款通过JavaScript来构建Web网站的自动化工具!

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

我们可以通过下面的一张图来完理解这一部分的功能

52291821342

webpack可以全一切变得都非常简单,它提倡模块化进行开发,拼提供通过工具的操作简化和提高前端开发工作

入门

WebPack是基于NodeJs平台运行的,所以,在合作Webpack之前,请先保证自己的开发环境下有NodeJs的运行环境

  1. 安装Webpack

    目前我们所使用的Webpack的版本为webpack3的版本,最新的版本为webpak4的版本,因最新版本对一些插件不支持,并有部分不稳定的情况,我们此处以webpack3为版本进行讲解

    $ yarn add webpack webpack-cli --dev
    

    说明:上面的代码是安装的webpack与webpack-cli(在webpack4的版本里面,默认要安装webpack-cli了)

  2. 编写JS代码,通过webpack来进行打包处理

    52291853912

    我们在上面的代码当中,创建了一个app.js和bar.js 然后在app.js中通过ES6的模块化开发,引入了这个文件

    正常情况下,我们是不可能在浏览器中使用export与import等这些关键字的,现在,我们可以在这里通过webpack来打印处理一下

    $ webpack index.js bundle.js
    

    说明:好面的代码是将index.js通过webpack打包以后,翻译成bundle.js,打包完成以后,我们就可以在浏览器中正常使用这个JS文件了

  3. 引入文件,查看效果

    52291870566

通过上面的入门,我们发现,其实,使用Webpack并不是很验,至少我们可以得出以后结论

  • webpack可以将es6的代码转换成我们浏览器使用的代码(正常情况下,es6的代码需要在nodejs环境下面才能够运行)
  • 我们通过webpack可以在进行模块化开发,同时,在模块化开发的过程当中,把这些模块化的代码运行于浏览器(以前的模块化开发,我们只是针对Nodejs的平台)

在这里,我们的Nodejs的一切比较良好的模块化开发特性,以及ES6的一些高效语法就都可以在这里进行使用了

WebPack.config.js的配置

在上面的入门代码里面,我们知道,如果要把我们的代码进行打包处理,则需要手动的去执行一条命令,但是这样操作非常麻烦 ,我们不可能每次更改代码以后都去手动的执行一次命令,这个时候,我们可以通过一个配置文件,来配置我们的Webpack操作

Webpack的配置文件,我们一般命名为webpack.config.js这个文件,在这个文件里面,有四大部分,如下:

  • 入口(entry)
  • 出口(output)
  • loader
  • 插件(plugins)

入口(entry)

首先,我们先在项目的根目录下面,创建一个webpack.config.js的文件,然后打开文件,编写如下代码

module.exports = {
  entry: './src/index.js'
};

说明:上面的./src/index.js代表的就是这个程序的入口文件

出口(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件。你可以通过在配置中指定一个 output 字段,来配置这些处理过程:

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

在上面的代码中,我们通过 output.filenameoutput.path 属性,来告诉 webpack bundle 的名称,以及我们想要生成到哪里。

就像之前的入门里面,我们使用webpack app.js bundle.js 一样,前面是入口文件,后面是出口文件

在配置完成以后,我们可以在package.json里面配置启动命令,生成我们打包以后的JS代码了

//package.json文件
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
},

scripts的属性下面添加build的属性,这个时候执行npm run build就会调用webpack的命令,webpack就会调用配置文件webpack.config.js来进行打包了

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。

例如,我可以让webpack来处理scss的预处理CSS文件,也可以让webpack来处理vue的文件,这都是webpack所具务的功能,但是,webpack如果想要使用这些功能,必须要使用第三方的模块,而这些第三方的模块,我们就叫做loader

注意,loader 能够 import 导入任何类型的模块(例如 .css 文件),这是 webpack 特有的功能,其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是有很必要的,因为这可以使开发人员创建出更准确的依赖关系图。

在配置loader的时候,里面有两个必填属性,一个是test,一个是use属性:

  1. test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。
  2. use 属性,表示进行转换时,应该使用哪个 loader。

babel与webpack的结合

我们刚刚说过一件事情,就是我们在使用webpack的时候,可以将我们的es6代码的模块化运用得非常好,但是,有些时候,浏览器必不能识别所有的es6代码,这个时候,我们就需要使用一个第三方模块,来处理我们的es6代码,而这个模块就是babel

Babel是一款非常浏览的代码翻译工具,无论是现在的ES6,还是Vue或React,这些大名鼎鼎的框架都是要基于Babel的,如果脱离了Babel,这些框架运行起来会非常困难

首先,我们要知道 Babel的第三方模块如果去使用。在Babel的中文官网当中,我们可以找到babel在webpack中的配置(在此处说明一下,babel这个第三方模块不只是运行在webpack中,还可以运行在其它的平台),具体使用步骤如下:

  1. 安装

    $ yarn add @babel/core babel-loader @babel/preset-env --dev
    $ yarn add @babel/polyfill  
    

    注意要分开安装,一个是上面的是开发依赖,下面的@babel/polyfill是生产依赖

  2. 通过config进行配置

    //webpack.config.js文件
    module: {
      rules: [
        { test: /\.js$/, exclude: /node_modules/, use:["babel-loader"] }
      ]
    }
    

    说明:上面的代码的意思就是告诉webpack,如果碰到.js的文件,就使用第三方的模块babel-loader来进行处理一下,但是并不是所有的js文件都要处理,在node_modules这里面的文件就不要处理了

  3. 配置代码的处理方式

    我们刚刚都说过了,我们的babel是一个代码翻译工具,它会把我们的代码翻译成我们浏览器认识的语言,可是,我们总要告诉babel我们所使用的语言到底是什么语言吧,这个时候,我们就需要添加一个babel的专用配置文件

    我们需要在项目的根目录下面创建一个.babelrc这个文件,然后在这个文件当中,配置如下信息:

    //.babelrc文件
    {
        "presets": ["@babel/preset-env"]
    }
    
  4. 配置代码的运行环境

    代码的运行环境指当前生成的代码要在什么场景(什么版本的浏览器)下面运行,这个设置可以在当前的package.json下面去进行配置

    {
      "name": "webpack1",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --config webpack.config.js",
        "dev": "webpack-dev-server --config webpack.config.js"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "@babel/core": "^7.6.4",
        "@babel/preset-env": "^7.6.3",
        "babel-loader": "^8.0.6",
        "css-loader": "^3.2.0",
        "html-webpack-plugin": "^3.2.0",
        "postcss-cssnext": "^3.1.0",
        "postcss-import": "^12.0.1",
        "postcss-loader": "^3.0.0",
        "style-loader": "^1.0.0",
        "webpack": "^4.41.2",
        "webpack-cli": "^3.3.9",
        "webpack-dev-server": "^3.9.0"
      },
      "browserslist": [
        "defaults",
        "not ie < 11",
        "last 2 versions",
        "> 1%",
        "iOS 7",
        "last 3 iOS versions"
      ],
      "dependencies": {
        "@babel/polyfill": "^7.6.0"
      }
    }
    

    重点是看上面的的browserslist 这个部分,这里是配置了浏览的版本

  5. 配置polyfill的环境

    通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)

    //webpack.config.js文件
    const config={
        entry: ["@babel/polyfill",path.join(__dirname, "./js/index.js")],
    }
    

    修改config的入口文件entry属性经过的上面的配置以后,我们的js代码就可以转换成ES5的代码在浏览器里面运行了

webpack-dev-server配置

这个插件的主要目的是用地配置webpack的开发环境,因为在开发环境里面,我们不可以每次修改代码以后都重新生成,这个时候,就要实时的修改代码了

webpack-dev-server这个插件需要使用到一个插件html-webpack-plugin,现在安装所需要的插件

  1. 安装插件

    $ yarn add webpack-dev-server html-webpack-plugin@next --dev
    
  2. 在webpack.config.js里面添加配置信息

    //webpack.config.js
    const config ={
        //......前面的代码
         //配置webpack的插件
        plugins:[
            new HtmlWebpackPlugin({
                title:"标哥的第一个webpack网页",
                template:"index.html",
                filename:"abc.html",   //生成的文件名叫abc.html
                inject:true    //将生成的好的JS与CSS都自动插入到这个网页里面去
            })
        ],
         devServer:{
            port:9999,
            host:"0.0.0.0",
            //告诉服务器从哪提供内容,只有在想要提供静态文件时才需要
            contentBase:"./dist"
        }
    }
    
    • title代表网页的标题

    • template代表根据那个文件生成新的文件

    • filename代表生成新的文件的名称

    • inject代表是否将生成好的JS与CSS自动插入到网页里面去

    上面的plugin指的是webpack的插件,而devServer则是启动webpack-dev-server时候的相关信息,例如配置端口号,配置相关IP以及启动目录等

  3. 配置启动命令

    package.json里面添加开发环境的启动命令

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

    package.json的文件里面的scripts属性里面添加dev属性,然后添加对应命令webpack-dev-server --config webpack.config.js

    当我们去执行npm run dev的时候,就会启动一个http服务器,这个服务器的端口号是我们之前配置的9999,我们在地址栏输入http://127.0.0.1:9999/就可以看到地址了,然后选择要调试的文件,就可以看到我们的HTML页面了

此时我们的目录结构如下图所示

1571997574536

dist目录就是生成文件的目录 .babalrc就是babel的配置文件, index.html就是一个普通的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><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
    <h2>这是原来的网页</h2>
    <div class="div1">12312</div>
</body>
</html>

在网页的标题里面<%=htmlWebpackPlugin.options.title%>这一段代码代表插入之前在webpack.config.js里面配置plugins里面的插件htlm-webpack-plugin定义的名称

postcss的使用

在webpack里面,我们需要使用css去设置页面的样式 。当我们写好一个CSS文件以后,需要通过如下的方式去导入

//src/index.js文件
import "./css/index.css"

我们在入口文件这个地方导入了这个文件,但是webpack本身并不能理解css文件【webpack本身只能处理javaScript的文件,非JS的文件需要使用第三方的loader】。所以我们需要用css-loader。在使用css-loader的时候,我们可以利一下postcss-loader。具体说明如下

postcss是一个用 JavaScript 工具和插件转换 CSS 代码的工具,通过这个工具,我们可以实现CSS代码的兼容性

postcss有很多第三方的插件,例如postcss-import可以处理css里面的@import导入,postcss-cssnext处理CSS的前缀以提高CSS的兼容性,cssnanoCSS代码生成的时候进行压缩等

  1. 安装插件

    $ yarn add postcss-loader --dev
    $ yarn add postcss-import postcss-cssnext cssnano --dev
    
  2. 在webpack中配置postcss

    const config={
        //....前面的代码
        module:{
            rules:[
                //......前在贩代码
                {
                    test:/\.css$/,
                    exclude: /node_modules/,
                    use:[
                        "style-loader",
                        "css-loader",
                        "postcss-loader"
    
                    ]
                }
            ]
        }
    }
    
    • css-loader是用于让webpack处理以css结尾的文件的
    • postcss-loader是用于提高CSS的兼容性的,把CSS做二次处理
    • style-loader在开发模式下面使用,因为在开发模式下面,我们把CSS样式做了更改以后,要直接插入到页面的style标签里面,这样就可以实时的在页面上面体现效果
  3. 添加postcss.config.js文件,以加载postcss的插件

    在目录下面新建一个postcss.config.js文件,添加如下内容

    /**
     * postcss的配置文件
     */
    
     module.exports={
        //  加载postcss的插件
         plugins:[
            require("postcss-import"),
            require("postcss-cssnext"),
            require("cssnano")
         ]
     }
    

    添加完这个些配置以后,我们就可以直接在js文件里面导入css文件了

    //index.js文件
    /**
      * 导出的时候如果有default就不解构,
      * 如果没有default就解构
      */
     import Student,{Instructor} from "./Student.js";
    //如果没有默认导出的情况之下,我们可以使用这种方式直接拿到里面所有的导出
    import * as utils from "./utils.js";
    import { util } from "node-forge";
    let s=new Student();
    s.sayHello();
    let instructor = new Instructor();
    
    instructor.sayHello();
    
    console.log(utils.getConn());
    
     //webpack并没有限定import的导入类型 
    //导了一个CSS文件   非JavaScript文件
    import "../css/index.css";
    
    • postcss-import插件处理css里面的@improt
    • postcss-cssnext处理CSS的兼容性
    • cssnano插件在CSS打包的时候进行压缩
0

评论区