webpack 基于Node.js静态资源的模块打包器

当打包时会从一个七点开始查找各模块的依赖关系，并且按照依赖关系将文件打包成一个或多个包

使用webpack打包的优点

模块化通过模块化管理这些依赖
自动编译less sass
可以把基于js的扩展语言编译成js
开发环境配置代理解决开发环境跨域

安装全局安装

npm i webpack-cil -g
npm i webpack -g

手动配置 webpack

新建文件夹 webpack
在webpack下新建文件夹 app public
在 app 下新建 Greeter.js main.js config.json
在public目录下新建index.html
写入代码

Greeter.js


let config = require('./config.json');
module.exports = function(){
    var greet = document.createElement('div');
    greet.textContent = config.greeterText;
    return greet;
}

config.json


{"greetText":"this is json"}

main.js

const greeter = require('./Greeter.js');
document.querySelector('#root').appendChild(greeter());
console.log(1);

/pubilc/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="root"></div>
<p class="paragraph">12333</p>
<div>xxxxxx</div>

<script src="bundle.js"></script>
</body>
</html>

在webpack目录下打开命令行输入打包命令

webpack-cli --entry./app/main.js --output ./public/bundle.js

打开HTML页面

配置 npm scripts 为了减少配置参数的量

先生成一个package.json文件
里面有一个 script对象在这个对象中每一个属性都可以通过 npm run 执行的命令

{
    "name":"wbp",
    "version":"1.0.0",
    "description":"",
    "main":"index.js",
    "scripts":{
        "test": "echo \"Error: no test specified\" && exit 1",
        "cmdBuild": "webpack-cli --entry ./app/main.js --output ./public/bundle.js"
    },
     "keywords": [],
     "author": "",
     "license": "ISC"
}
//在 cmd 中执行 npm run cmdBuild 就相当于在执行 webpack-cli --entry ./app/main.js --output ./public/bundle.js 命令；

webpack配置文件

在项目根目录下创建一个webpack.config.js webpack打包时会自动加载文件名为webpackconfig.js的文件

本地安装 webpack-cli webpack

npm i webpack-cli webpack --save-dev

配置入口出口

entry（入口）打包的起点从这个文件开始查找依赖关系
output（出口）打包后的文件输出的目录和文件名

module.exports = {
  entry: __dirname + '/app/main.js',
  output: {
    path: __dirname + '/public', // 打包后文件存放的地方
    filename: 'bundle.js' //打包后的文件名
  }

配置 source-map

js代码编译后可读性差不利于调试而浏览器有一种scource-map机制可以通过这个机制将js文件虚拟还原成打包之前的样子这样方便调试 **webpack 在打包结束后可以自动生成scource map **

module.exports = {
  devtool: "eval-source-map", // 生成source-map
  entry: __dirname + '/app/main.js',
  output: {
    path: __dirname + '/public', // 打包后文件存放的地方
    filename: 'bundle-[hash:5].js'
  }
};

配置打包的npm script 在webpack.json中配置build命令

{
  "name": "wbp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "cmdBuild": "webpack-cli --entry ./app/main.js --output ./public/bundle.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
//在命令行中执行 npm run build 即可打包

配置dev-server

一般在开发过程中我们需要让webpack给我们启动一个本地服务器

这样可以让浏览器监听医德代码的修改并自动刷显示修改后的结果
提供ajax接口的代理解决开发环境的跨域问题

安装

npm i webpack-dev-server --save-dev

在webpack中添加配置项

 devServer: {
    contentBase: './public', // 本地服务器所加载的页面所在的目录
    historyApiFallback: true, // 单页面应用路由切换时不跳转
    inline: true, // 实时刷新
    port: 8080, //启动时的端口号
    proxy: { //代理配置
      '/api': { // 如果接口中带有 API 标志，那么就需要开始代理
        target: 'http://localhost:8001',
        changeOrigin: true,  // target 是域名的话，需要这个参数，
        secure: false  // 设置支持 https 协议的代理，不检查安全与否
      }
    }

启动 dev-server

{
  "name": "wbp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "cmdBuild": "webpack-cli --entry ./app/main.js --output ./public/bundle.js",
    "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack-dev-server": "^3.7.2"
  }
}

配置loaders 解决webpack只能处理js文件

loader 需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置

 module: {
    rules: [
      {
        test: /(\.jsx|\.js)$/, //一个用以配置loaders所处理文件得扩展名的正则表达式（必须）
        use: { //loader 的名称（必须）
          loader: "babel-loader",
          options: {
            presets: ['env', 'react']
          }
        },
        include/exclude: /node_modules/, //手动添加必须处理的文件（夹）或屏蔽不需要的文件（夹）（可选）
        query:为loaders提供额外的设置选项（可选）
      }
    ]
  }

配置babel 编译js的平台在这里可以使用最新的js代码不管当前使用的浏览器是否完全支持可以使用基于js的扩展的语言如 jsx

安装

babel-core babel 的核心
babel-loader babel的 loader （安装7.x.x 版本，如7.1.5）
babel-preset-env 把 ES5/6/7 转成当前能使用的版本
babel-preset-react 解析 React 的 JSX 语法

npm i babel-core babel-loader@7.1.5 babel-preset-env babel-preset-react --save-dev

使用

  module: {
    rules: [
      {
        test: /(\.jsx|\.js)$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['env', 'react']
          }
        },
        exclude: /node_modules/
      }
    ]
  }

配置CSS loader less-loader 使css 可以像js那样导进来

安装 css-loader style-loader

安装 css-loader 可以使用 @import 或者 url 等方法导入其他资源
style-loader 将所有计算后的样式加入页面中

npm i style-loader caaa-loader less less-loader--save-dev

###在webpack中配置loader

 module: {
    rules: [
      {
        test: /(\.jsx|\.js)$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['env', 'react']
          }
        },
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          }
        ]
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']  
      },
      {
          test:/\.(png/jpg/gif)$/,
          use:{
              loader:'url-loader'
          }
      }
    ]
  }

配置 url-loader 配置后可以导入图片

安装

npm i url-loader --save-dev

插件（Plugins）用来拓展webpack功能会在真个构建过程中生效执行相关的任务

插件的使用

安装 html-webpack-plugin

npm i html-webpack-plugin --save-dev

引入插件

let HTMLWebpackPlugin = require('html-webpack-plugin ')

在 webpack 中增加一个 plugins 字段，它的值是一个数组，使用插件就是创建一个插件的实例，然后作为数组项放到 plugins 中；

 plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + '/public/index.html' // 指定一个模板，webpack 将会按照这个模板创建 html
    })
  ]

执行后在 build 目录下有一个 index.html 和 bundle.js；同时 index.html 已经自动引入了 bundle.js