webpack4从入门到放弃

118 阅读3分钟

查看node和webpack的版本

起步

  首先创建一个文件夹webpack4-test,并初始化npm,然后本地安装webpack和webpack-cli。

mkdir webpack4.0-demo && cd webpack4.0-demo
// 初始化npm,并全部使用默认值
npm init -y

本地安装

  使用4+版本需要安装webpack-cli,

 cnpm install --save-dev webpack webpack-cli

目录结构

src/index

要在 index.js 中打包 lodash 依赖,我们需要在本地安装 library:

cnpm install --save-dev lodash

import _ from 'lodash'

function creatEl(){
    let el = document.createElement('div');

    // Lodash(目前通过一个 script 脚本引入)对于执行这一行是必需的
    el.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return el
}

document.body.appendChild(creatEl())

dist/index.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>webpack</title>
</head>
<body>
    <script src="./main.js"></script>
</body>
</html>

package.json

{
  "name": "webpack4.0-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,// 删除入口文件,确保我们安装包是私有的(private),使用时请删除掉这段注释
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "lodash": "^4.17.11",
    "webpack": "^4.19.0",
    "webpack-cli": "^3.1.0"
  }
}

 执行webpack或者npx webpack,会将脚本作为入口文件,然后输出为main.js

  在浏览器中打开 index.html,如果一切访问都正常,你应该能看到以下文本:'Hello webpack'。   

使用配置文件

  在 webpack 4 中,可以无须任何配置使用,然而大多数项目会需要很复杂的设置,这就是为什么 webpack 仍然要支持 配置文件。这比在终端(terminal)中手动输入大量命令要高效的多,所以让我们创建一个取代以上使用 CLI 选项方式的配置文件。

  在主目录先添加一个webpack.config.js文件。   

webpack.config.js

const path = require('path');

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

在package.json中的添加如下

 将index.html中的script标签的src改成bundle.js。现在,可以使用 npm run build 命令,来替代我们之前使用的 npx 命令。注意,使用 npm 的 scripts,我们可以像使用 npx 那样通过模块名引用本地安装的 npm 包。  

管理资源

加载css

  为了从 JavaScript 模块中 import 一个 CSS 文件,需要在 module 安装并添加 style-loader 和 css-loader。

cnpm install --save-dev css-loader style-loader

在webpack.config.js中的代码如下

 const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

webpack 根据正则表达式,来确定应该查找哪些文件,并将其提供给指定的 loader。在这种情况下,以 .css 结尾的全部文件,都将被提供给style-loader和css-loader。 这使你可以在依赖于此样式的文件中 import 'style.css'。

在src文件夹下添加一个style.css文件

src/style.css

.hello{
    color: red;
}

src/index.js

import _ from 'lodash'
import './style.css'
function creatEl(){
    let el = document.createElement('div');

    // Lodash(目前通过一个 script 脚本引入)对于执行这一行是必需的
    el.innerHTML = _.join(['Hello', 'webpack'], ' ');

    el.className = 'hello';

    return el
}

document.body.appendChild(creatEl())

  重新执行命令,在浏览器中打开index.html可以看到字体变成红色。

加载图片

  加载图片需要先安装file-loader

cnpm install --save-dev file-loader

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(jpg|png|svg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
}

src/index.js

在src文件夹下放一张名为01.jgp的图片

import _ from 'lodash'

import "./style.css"
import Icon from './01.jpg'

function creatEl(){
    let el = document.createElement('div');

    // Lodash(目前通过一个 script 脚本引入)对于执行这一行是必需的
    el.innerHTML = _.join(['Hello', 'webpack'], ' ');

    el.className = 'hello';

    let img = new Image();
    img.src = Icon
    el.appendChild(img)
    return el
}

document.body.appendChild(creatEl())

重新执行命令,在浏览器中打开index.html可以看到图片显示。

模块热更新

观察者模式

在package.json添加一个用于启动 webpack 的观察模式的 npm script 脚本:

现在,运行npm run watch,就会看到webpack编译代码后并不会退出。这是因为 script 脚本还在观察文件。

唯一的缺点是,为了看到修改后的实际效果,你需要刷新浏览器。如果能够自动刷新浏览器就更好了,可以尝试使用 webpack-dev-server,恰好可以实现我们想要的功能。

webpack-dev-server

cnpm install --save-dev webpack-dev-server

webpack.config.js 中添加这一行代码

package.json中添加如下代码

现在,我们可以在命令行中运行 npm start,就会看到浏览器自动加载页面。如果现在修改和保存任意源文件,web 服务器就会自动重新加载编译后的代码。

参考

个人网站:www.panbingwen.cn