webpack基础配置-杨标的博客

webpack基础配置

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

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

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

52291821342

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

入门

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

安装Webpack

目前我们所使用的Webpack的版本为webpack3的版本，最新的版本为webpak4的版本，因最新版本对一些插件不支持，并有部分不稳定的情况，我们此处以webpack3为版本进行讲解
```
$ yarn add webpack webpack-cli --dev
```
说明：上面的代码是安装的webpack与webpack-cli(在webpack4的版本里面，默认要安装webpack-cli了)
编写JS代码，通过webpack来进行打包处理

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

正常情况下，我们是不可能在浏览器中使用export与import等这些关键字的，现在，我们可以在这里通过webpack来打印处理一下
```
$ webpack index.js bundle.js
```
说明：好面的代码是将index.js通过webpack打包以后，翻译成bundle.js,打包完成以后，我们就可以在浏览器中正常使用这个JS文件了
引入文件，查看效果

通过上面的入门，我们发现，其实，使用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.filename 和 output.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属性：

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

babel与webpack的结合

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

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

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

安装
```
$ yarn add @babel/core babel-loader @babel/preset-env --dev
$ yarn add @babel/polyfill  
```
注意要分开安装，一个是上面的是开发依赖，下面的@babel/polyfill是生产依赖
通过config进行配置
```
//webpack.config.js文件
module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, use:["babel-loader"] }
  ]
}
```
说明：上面的代码的意思就是告诉webpack,如果碰到.js的文件，就使用第三方的模块babel-loader来进行处理一下，但是并不是所有的js文件都要处理，在node_modules这里面的文件就不要处理了
配置代码的处理方式

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

我们需要在项目的根目录下面创建一个.babelrc这个文件，然后在这个文件当中，配置如下信息：
```
//.babelrc文件
{
    "presets": ["@babel/preset-env"]
}
```

配置代码的运行环境

代码的运行环境指当前生成的代码要在什么场景（什么版本的浏览器）下面运行，这个设置可以在当前的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 这个部分，这里是配置了浏览的版本

配置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,现在安装所需要的插件

安装插件

$ yarn add webpack-dev-server html-webpack-plugin@next --dev

在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以及启动目录等

配置启动命令

在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代码生成的时候进行压缩等

安装插件

$ yarn add postcss-loader --dev
$ yarn add postcss-import postcss-cssnext cssnano --dev

在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标签里面，这样就可以实时的在页面上面体现效果

添加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打包的时候进行压缩

目录CONTENT

webpack基础配置