webpack4 入门篇新手指南

deanyuancn

发布于 2021-1-28 09:29

浏览

0收藏

前言:

webpack4出了以后，一些插件变化很大，和之前的版本使用方式不一样，新手入坑，本篇将介绍如何从一开始配置webpack4的开发版本，对css，js进行编译打包合并生成md5，CSS中的图片处理，js自动注入html页，删除指定文件，热更新等等。

安装

// 全局安装
npm install -g webpack webpack-cli    1.
2.

新建目标文件夹并初始化

shift+鼠标右键选择在此处打开命令窗口

//创建文件夹
mkdir demo
//进入demo
cd demo
//初始化
npm init -y1.
2.
3.
4.
5.
6.

创建文件夹scripts并在scripts中新建index.js

// 写一个方法  并运行
function fn()
{
    alert("webpack4.0")
};
fn();1.
2.
3.
4.
5.
6.

创建webpack.config.js 与scripts文件夹在同一目录

const path=require("path")
module.exports={
    entry:{
        index:"./scripts/index.js"     //入口文件,若不配置webpack4将自动查找src目录下的index.js
    },
    output:{
        filename:'[name].bundle.[hash].js',    //输出文件名,[name]表示入口文件js名  [hash]会在后面生成随机hash值
        path:path.join(__dirname,'dist')       //输出文件路径
    }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

执行webpack --mode development将会生成dist/index.bundle.xxx.js

创建src 文件夹并新建index.html,并引入dist中的js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <span>你这么会在这儿?</span>
</body>
 <script src='../dist/index.bundle.02e498fba7b66781de8c.js'> -->
</script>
</html>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

打开浏览器将会看到设置的js 文件生效了

在src文件夹中分别创建a.css a.js c.js,更改index.js, 分别为:

a.css

body{
    background-image: url('../scripts/Koala.jpg');
    /* background-color: aquamarine; */
}1.
2.
3.
4.

a.js

import c from './c.js';
const data={
    init(){
        alert("I'm a little coder")
    },
    cinit(){
        c.init()
    }
}
export default data;1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

c.js

const data={
    init(){
        document.write("Hello World")
    }
}
export default data;1.
2.
3.
4.
5.
6.

index.js

import a from '../src/a.js'
import c from '../src/c.js'
 
function fn()
{
    alert("webpack4.0")
    a.init()
    c.init()
};
fn();1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

配置webpack.config.js 文件

const path=require("path")
module.exports={
    entry:{
        index:"./scripts/index.js"     //入口文件,若不配置webpack4将自动查找src目录下的index.js
    },
    output:{
        filename:'[name].bundle.[hash].js',    //输出文件名,[name]表示入口文件js名  [hash]会在后面生成随机hash值
        path:path.join(__dirname,'dist')       //输出文件路径
    },
    module:{  // 处理对应模块
        rules:[   
            {
                test:/\.css$/,
                use:['style-loader','css-loader']     //处理css
            }
         ]
    }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

安装style-loader， css-loader

npm install style-loader css-loader --save-dev1.

执行webpack --mode development将会看到一个带md5值得js文件，将他引入html中

CSS中的图片处理

安装url-loader, file-loader

npm install url-loader file-loader --save-dev1.

配置webpack.config.js文件

const path=require("path")
module.exports={
    entry:{
        index:"./scripts/index.js"     //入口文件,若不配置webpack4将自动查找src目录下的index.js
    },
    output:{
        filename:'[name].bundle.[hash].js',    //输出文件名,[name]表示入口文件js名  [hash]会在后面生成随机hash值
        path:path.join(__dirname,'dist')       //输出文件路径
    },
    module:{  // 处理对应模块
        rules:[   
            {
                test:/\.css$/,
                use:['style-loader','css-loader']     //处理css
            },
            {
                test:/\.(png|jpg|gif)$/,
                use:[{
                    loader:'url-loader',
                    options:{
                        outputPath:'images/',      //输出到images文件夹
                        limit:999999               //是把小于999999B的文件打成Base64的格式，写入JS
                    }
                }]
            }
        ]
    }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

执行webpack --mode development将会看到dist中有一个images文件夹中有一张图片，打开index.html

js自动注入html文件

使用插件html-webpack-plugin，可以将生成的js自动引入html页面，不用手动添加
使用插件clean-webpack-plugin，删除指定文件，更多配置，查看clean-webpack-plugin

// 安装html-webpack-plugin
npm install html-webpack-plugin --save-dev
// 安装webpack webpack-cli
npm install webpack webpack-cli --save-dev
/ /安装clean-webpack-plugin
npm install clean-webpack-plugin --save-dev1.
2.
3.
4.
5.
6.

配置webpack.config.js文件

const path=require("path");
const HtmlWebpackPlugin=require('html-webpack-plugin')//引入html-webpack-plugin 可以将生成的js自动引入html页面
const CleanWebpackPlugin=require('clean-webpack-plugin')//引入删除指定文件组件
const webpack=require('webpack')
module.exports={
    entry:{
        index:"./scripts/index.js"     //入口文件,若不配置webpack4将自动查找src目录下的index.js
    },
    output:{
        filename:'[name].bundle.[hash].js',    //输出文件名,[name]表示入口文件js名  [hash]会在后面生成随机hash值
        path:path.join(__dirname,'dist')       //输出文件路径
    },
    module:{  // 处理对应模块
        rules:[   
            {
                test:/\.css$/,
                use:['style-loader','css-loader']     //处理css
            },
            {
                test:/\.(png|jpg|gif)$/,
                use:[{
                    loader:'url-loader',
                    options:{
                        outputPath:'images/',      //输出到images文件夹
                        limit:999999               //是把小于999999B的文件打成Base64的格式，写入JS
                    }
                }]
            }
        ]
    },
    plugins:[ //对应的插件
        new HtmlWebpackPlugin({//配置
           filename:'index.html',//输出文件名
           template:'./src/index.html',   //以当前目录下的index.html文件为模板生成dist/index.html文件
        }),
        new CleanWebpackPlugin(),  //webpack 4 +的默认配置 默认删除output dist下的文件
    ]
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.

每次执行webpack --mode development，可以看到dist目录被删除，又生成一个新的dist，之前的js文件已经被删除。

热更新，自动刷新

我们将用到webpack-dev-serve，webpack-dev-server就是一个基于Node.js和webpack的一个小型服务器，它有强大的自动刷新和热替换功能。

安装webpack-dev-serve

npm install webpack-dev-serve --save-dev1.

配置webpack.config.js文件

const path=require("path");
const HtmlWebpackPlugin=require('html-webpack-plugin')//引入html-webpack-plugin 可以将生成的js自动引入html页面
const CleanWebpackPlugin=require('clean-webpack-plugin')//引入删除指定文件组件
const webpack=require('webpack')
module.exports={
    entry:{
        index:"./scripts/index.js"     //入口文件,若不配置webpack4将自动查找src目录下的index.js
    },
    output:{
        filename:'[name].bundle.[hash].js',    //输出文件名,[name]表示入口文件js名  [hash]会在后面生成随机hash值
        path:path.join(__dirname,'dist')       //输出文件路径
    },
    module:{  // 处理对应模块
        rules:[   
            {
                test:/\.css$/,
                use:['style-loader','css-loader']     //处理css
            },
            {
                test:/\.(png|jpg|gif)$/,
                use:[{
                    loader:'url-loader',
                    options:{
                        outputPath:'images/',      //输出到images文件夹
                        limit:999999               //是把小于999999B的文件打成Base64的格式，写入JS
                    }
                }]
            }
        ]
    },
    plugins:[ //对应的插件
        new HtmlWebpackPlugin({//配置
           filename:'index.html',//输出文件名
           template:'./src/index.html',   //以当前目录下的index.html文件为模板生成dist/index.html文件
        }),
        new CleanWebpackPlugin(),  //webpack 4 +的默认配置 默认删除output dist下的文件
    ],
    devServer:{//配置此静态文件服务器，可以用来预览打包后项目
        inline:true,  //打包后加入一个websocket客户端
        hot:true,//热加载
        contentBase:path.resolve(__dirname,'dist'),//开发服务运行时的文件根目录
        host:'localhost',//主机地址
        port:9090,//端口号
        compress:true//开发服务器是否启动gzip等压缩
    }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.

配置package.json

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --mode development"
  },1.
2.
3.
4.

执行npm run dev 访问 http://localhost:9090/

这样随意修改一个文件就会自动刷新

分类

JavaScript

标签

webpack

新手指南

已于2021-1-28 09:29:26修改

51CTO

51CTO博客

51CTO学堂

webpack4 入门篇新手指南

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

webpack4 入门篇 新手指南

订阅鸿蒙技术特刊，精选内容抢先看

webpack4 入门篇新手指南