Webpack4.x 入门上手实战（2018.08）

2018-08-14 本文已影响0人 River_mx

一、开始

安装

# 安装最新稳定版本
npm i -D webpack
# 安装指定版本
npm i -D webpack@<version>
# 安装最新的体验版本
npm i -D webpack@beta

# 全局安装
npm i -g webpack

npm i -D 是 npm install --save-dev 的缩写

创建文件

先构建基础的js和html文件：

页面入口文件 index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>webpack-test</title>
</head>

<body>
  <div id="app">
    <!-- 导入打包好的文件 -->
    <script src="./dist/bundle.js"></script>
  </div>

</body>

</html>

工具函数 show.js

// 操作 DOM 元素，把 content 显示到网页上
function show(content) {
  window.document.getElementById('app').innerText = 'Hello,' + content;
}

// 通过 CommonJS 规范导出 show 函数
module.exports = show;

执行入口 main.js

// 通过 CommonJS 规范导入 css 模块
require('./main.css');
// 通过 CommonJS 规范导入 show 函数
const show = require('./show.js');
// 执行 show 函数
show('Webpack');

wbbpack在执行构建时默认会从项目根目录 webpack.config.js 文件读取配置信息，内容如下：

const path = require('path');

module.exports = {
  // JS 执行入口文件
  entry: './main.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [
      {
        // 用正则去匹配要用该 loader 转换的 css 文件
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader'],
      }
    ]
  }
};

运行webpack构建会生成 bundle.js，为打包好的文件，包含了main.js、show.js等模块

测试

此时的package.json

{
  "name": "dive-into-webpack",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {},
  "devDependencies": {
    "css-loader": "^0.28.4",
    "style-loader": "^0.18.2",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0"
  }
}

执行：

npm run build

报错：

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
 - webpack-command (https://github.com/webpack-contrib/webpack-command)
   A lightweight, opinionated webpack CLI.
We will use "npm" to install the CLI via "npm install -D".

这里提示安装 webpack-cli
是因为到了webpack4, webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli，所以除了 webpack 外，我们还需要安装 webpack-cli：

npm i -D webpack-cli

重新执行：

npm run build

此时生成dist文件夹，里面为bundle.js文件
在浏览器内打开index.html文件可以看到
Hello,Webpack

使用 DevServer

提供HTTP服务
监听文件变化自动刷新，实时预览
支持Source Map

安装 DevServer

npm i -D webpack-dev-server

执行 DevServer

在 package.json 里添加

"scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  },

运行

npm run dev

此时提示：

Project is running at http://localhost:8080/
webpack output is served from /

注意：

此时我们删除之前使用webpack构建的dist静态目录
在浏览器访问http://localhost:8080/就可以打开 index.html 为空白，因为路径已经不是 ./dist/bundle.js，DevServer会将Webpack构建的文件存在内存中，跳过 webpack.config.js 的 output.path 属性，所以更改为直接访问./bundle.js

测试 DevServer

此时修改 main.js、show.js 等文件，保存后浏览器就自动刷新，运行处修改后的结果

核心

在 webpack中文文档中第一部分有详细的叙述，可以了解一下它的6个核心配置项：
Entry、Module、Chunk、Loader、Plugin、Output

二、实战

使用CSS和CSS预处理语言

配置Loader

下面的代码是从右到左依次适配的

loader: 'style-loader!css-loader!less-loader'

使用 CSS 和 LESS

npm i -D style-loader css-loader

npm i -D less-loader less

在 webpack.config.js rules里添加

      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }

测试

新建 main.less 文件
在 main.js中引入

require('./main.less');

写入样式

<style>
#app {
  background: gray;
  p{
    color: red;
  }
}
</style>

启动后查看界面效果

使用 SASS

使用SASS（SCSS）需要安装 node-sass ， node-sass 核心使用 C++ 编写，在用 Node.js 封装了一层，以提供其他 Node.js 调用

先全局安装

npm i -g node-sass

再执行编译命令

# 将 main.scss 源文件编译成  main.css
node-sass main.scss main.css
/

在 webpack.config.js rules里添加

      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      }

css压缩打包（测试失败，研究后发现4.x貌似不需要这些了，之前3.x之类使用的都无效了）

安装 mini-css-extract-plugin

# webpack4.x 使用 mini-css-extract-plugin
npm i -D mini-css-extract-plugin css-loader

在 webpack.config.js 中设置配置

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

...

    plugins: [

...

      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      })
    ]

使用ES6

Babel

Babel 是一个javascript编辑器，能将ES6代码转换为ES5代码，会从根目录下的.babelrc文件读取配置，为JSON格式的文件，例如：

{
  "presets": ["env"],
  "plugins": [
    [
      "transform-runtime",
       {
          "polyfill": false
       }
    ]
  ]
}

env 自动匹配所有的最新语法替代之前的 es2015 写法

配置项

Plugins

告诉Babel要使哪些插件，这些插件可以控制如何控制转换代码，例如安装 transform-runtime 插件，全名 babel-plugin-transform-runtime，此插件作用是减少冗余代码

npm i -D babel-plugin-transform-runtime

Presets

告诉Babel要转换的源码使用了哪些新的语法特性，例如：es2015

npm i -D babel-preset-es2015

接入Babel

在webpack配置rules添加

      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }

添加devtool

# 输出 source-map 以方便直接调试 ES6 源码
devtool: 'inline-source-map'

安装所需依赖

# Webpack 接入 Babel 必须依赖的模块
npm i -D babel-core babel-loader
# 根据我们的需求选择不同的 Plugins 或者 Presets
npm i -D babel-preset-env
# 安装 es2015
npm i -D babel-preset-es2015

测试

之前使用 CommonJS 规范进行模块的引入和导出，现在更改为 ES6 规范

main.js

// 通过 ES6 规范导入 css 模块
import './main.css';
import './main.less';
// 通过 ES6 模块化规范导入 show 函数
import { show } from './show';
// 执行 show 函数
show('Webpack');

show.js

// 操作 DOM 元素，把 content 显示到网页上
export function show(content) {
  window.document.getElementById('app').innerText = `Hello,${content}`;
}

其中 `Hello,${content}` 为 ES6 语法，然后启动运行，效果同 'Hello,' + content

webpack中文文档