一、webpack4.0基础篇

最新推荐文章于 2022-12-06 20:05:24 发布

VIP文章 Razas

最新推荐文章于 2022-12-06 20:05:24 发布

阅读量382

点赞数

分类专栏： WEBPACK4 文章标签： webpack4.0

本文链接：https://blog.csdn.net/qq_25354709/article/details/87259899

版权

一、webpack基础配置

1、webpack安装

一般会安装本地的webpack，我们要安装两个：webpack 和 webpack-cli。

在webpack4.0中，我们就需要安装webpack和webpack-cli。

// 先初始化
npm init -y

// -D表示开发依赖， 上线的时候不需要
npm install webpack webpack-cli -D

安装完之后，就可以进入webpack的配置。

2、webpack可以进行0配置

webpack是一个打包工具，可以把源码进行打包。

新建一个源码目录 src，在src目录新建文件index.js 。

console.log('hello');

那我们想把index.js这个文件进行打包，我们可以直接运行webpack的命令。

npx webpack

打包结果：

webpack4.0

webpack会自动生成一个dist目录。

3、webpack支持js的模块化

我们可以在js文件中写js模块化的东西。

在src目录新建 a.js 和 index.js

a.js

module.exports = 'hello'

index.js

let str = require('./a.js')
console.log(str)

运行webpack

npx webpack

打包结果：

webpack

在dist目录中新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>

直接用浏览器打开index.html，输出：hello。

4、手动配置webpack

默认配置文件的名字： webpack.config.js

在根目录新建 webpack.config.js文件

将dist目录删除掉，我们重新生成一下。

// webpack是node写出来的 node的写法

//path是node的内置模块，所以不需要去安装
let path = require('path');

module.exports = {
    // 模式：默认有两种，一种叫生产环境production， 一种叫 development
    // production 是经过压缩过的
    // 所以，我们选择 development模式，可以看清打包后的代码
    mode: 'development',
    entry: './src/index.js',  // 入口文件，也就是打包这个js文件
    // 打包的文件位置
    output: {
        filename: 'bundle.js',  // 打包出来当然文件名叫 bundle.js
        // resolve() 可以把相对路径解析成绝对路径
        // __dirname 是当前目录
        path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
    }
}

然后，运行 npx webpack

打包结果：

webpack

5、可以指定默认的配置文件

可以更改默认配置文件的名字，比如写的 webpack.config.my.js

npx webpack --config webpack.config.my.js

也可以在package.json里面配置运行脚本

  "scripts": {
    "build": "webpack --config webpack.config.my.js"
  },

npm run build

就相当于执行

npx webpack --config webpack.config.my.js

二、webpack打包出的文件解析

三、Html插件

我们希望在dist目录生成一个bundle.js文件的同时，也生成一个html文件。

1、webpack-dev-server

webpack-dev-server是webpack的开发服务器

先安装webpack-dev-server：

npm install webpack-dev-server -D

在dist目录下，新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>

然后运行：

npx webpack-dev-server

会生成一个内存中的打包。

在webpack.config.js中对开发服务器进行配置：

// webpack是node写出来的 node的写法

//path是node的内置模块，所以不需要去安装
let path = require('path');

module.exports = {
    devServer: { // 开发服务器的配置
        port: 3000,
        progress: true,   // 编译的进度条
        contentBase: './dist',    // 以dist目录为默认启动目录
        compress: true,     // 自动压缩
        open: true       // 自动打开浏览器，适合懒人
    },
    // 模式：默认有两种，一种叫生产环境production， 一种叫 development
    // production 是经过压缩过的
    // 所以，我们选择 development模式，可以看清打包后的代码
    mode: 'development',
    entry: './src/index.js',  // 入口文件，也就是打包这个js文件
    // 打包的文件位置
    output: {
        filename: 'bundle.js',  // 打包出来当然文件名叫 bundle.js
        // resolve() 可以把相对路径解析成绝对路径
        // __dirname 是当前目录
        path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
    }
}

也可以在package.json中配置运行：

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

运行开发服务器：

npm run dev

浏览器打开：

http://localhost:3000/

2、Html插件

我们希望在打包的时候，自动生成html文件。

在src目录，新建index.html。

我们希望把src/index.js，放到src/index.html中，并且把打包结果放到dist目录下。

我们需要使用一个插件：html-webpack-plugin

安装：

npm install html-webpack-plugin -D

在webpack.config.js中引用：

let HtmlWebpackPlugin = require('html-webpack-plugin');

在webpack.config.js中进行插件的配置：

// webpack是node写出来的 node的写法

//path是node的内置模块，所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devServer: { // 开发服务器的配置
        port: 3000,
        progress: true,   // 编译的进度条
        contentBase: './dist',    // 以dist目录为默认启动目录
        compress: true,     // 自动压缩
        open: true       // 自动打开浏览器，适合懒人
    },
    // 模式：默认有两种，一种叫生产环境production， 一种叫 development
    // production 是经过压缩过的
    // 所以，我们选择 development模式，可以看清打包后的代码
    mode: 'production',
    entry: './src/index.js',  // 入口文件，也就是打包这个js文件
    // 打包的文件位置
    output: {
        // 当js文件更改， [hash]的值会变化，每次build会生成一个新的bundle.js文件
        // [hash:8]，只显示8位的hash值
        filename: 'bundle.[hash:8].js',  // 打包出来当然文件名叫 bundle.js
        // resolve() 可以把相对路径解析成绝对路径
        // __dirname 是当前目录
        path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
    },
    // 数组 放着所有的webpack插件
    plugins: [
        // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
        new HtmlWebpackPlugin({
            template: './src/index.html',   // 使用哪个html模板
            filename: 'index.html',         // 打包后也叫做 index.html
            // 压缩这个html文件(主要是对HTML文件进行压缩)
            minify: {

最低0.47元/天解锁文章

Razas

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
一、webpack4.0基础篇

一、webpack基础配置1、webpack安装一般会安装本地的webpack，我们要安装两个：webpack 和 webpack-cli。在webpack4.0中，我们就需要安装webpack和webpack-cli。// 先初始化npm init -y// -D表示开发依赖，上线的时候不需要npm install webpack webpack-cli -D安装...
复制链接

扫一扫