webpack 手摸手学习系列之配置 devServer 和配置开发环境

最新推荐文章于 2022-08-26 17:43:21 发布

城南花开ze

最新推荐文章于 2022-08-26 17:43:21 发布

阅读量404

点赞数

分类专栏： Webpack、Vite、Gulp 文章标签： webpack 手摸手学习系列配置 devServer 配置开发环境

本文链接：https://blog.csdn.net/weixin_42614080/article/details/106343136

版权

Webpack、Vite、Gulp 专栏收录该内容

36 篇文章 6 订阅

订阅专栏

一、webpack 配置 devServer

创建空文件夹，通过 npm init 命令初始化 package.json 文件，通过 npm install webpack webpack-cli -g 命令全局下载 webpack 和 webpack-cli，通过 npm install webpack webpack-cli -D 命令本地下载 webpack 和 webpack-cli，通过 npm i style-loader css-loader -D 命令下载 style-loader 和 css-loader，通过 npm i html-webpack-plugin -D 命令下载 html-webpack-plugin 插件，通过 npm install file-loader -D 命令下载 file-loader，通过 npm install webpack-dev-server -D 命令下载 webpack-dev-server。
创建 src 文件目录，里面创建 index.html 和 index.js 文件，同时引入其它资源，比如字体图标，代码如下所示：

index.js

import './iconfont.css';

function add(x, y) {
    return x + y;
}

console.log(add(1, 2));
console.log(add(4, 8));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <span class="iconfont icon-icon-test"></span>
    <span class="iconfont icon-icon-test2"></span>
    <span class="iconfont icon-icon-test3"></span>
    <span class="iconfont icon-icon-test1"></span>

    <div>hello webpack</div>
</body>
</html>

创建 webpack.config.js 文件，通过 require 引入 path 和 html-webpack-plugin。entry 是入口文件，output 是出口文件，filename 是打包输出后的文件名，path 是输出路径。module 是 loader 的配置，rules 是详细的 loader 配置。第一个规则是匹配以 .css 结尾的文件，使用的 loader 是 style-loader 和 css-loader。第二个规则是打包其他资源(除了html/js/css资源以外的资源)，通过 exclude 排除css/js/html资源，使用的 loader 是 file-loader。由于打包后得到的是 hash 值，名称很长，所以进行 options 配置，将 name 的名字设置为 [hash:10].[ext]，取 hash 前 10 位并且文件原来的扩展名。plugins 里面是一些插件配置，通过 new HtmlWebpackPlugin()，复制里面的文件，并自动引入打包输出的所有资源（JS/CSS），设置 mode 模式为 development 开发模式。如果在每一次更改代码以后，都需要重新 webpack 打包一遍才能够看到最新的效果，比较麻烦，而 webpack-dev-server 可以解决实现自动更新。发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）。特点是只会在内存中编译打包，不会有任何输出。在 devServer 中，contentBase 是项目构建后路径，compress 是启动gzip压缩，port 是端口号，open 是自动打开浏览器，代码如下所示：


const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader']
            },
            {
                exclude: /\.(css|js|html)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development',
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        compress: true,
        port: 3000,
        open: true
    }
}

在命令行输入 npx webpack-dev-server 命令，项目就会自动打包编译。每次在更改完代码后，自动编译看到最新的显示内容。

二、webpack 配置开发环境

创建空文件夹，通过 npm init 命令初始化 package.json 文件，通过 npm install webpack webpack-cli -g 命令全局下载 webpack 和 webpack-cli，通过 npm install webpack webpack-cli -D 命令本地下载 webpack 和 webpack-cli，通过 npm i style-loader css-loader -D 命令下载 style-loader 和 css-loader，通过 npm i less less-loader -D 命令下载 less 和 less-loader，通过 npm i html-webpack-plugin -D 命令下载 html-webpack-plugin 插件，通过 npm i url-loader file-loader -D 命令下载 url-loader 和 file-loader，通过 npm i html-loader -D 命令下载 html-loader。
创建 src 文件夹，在里面创建 css、js、imgs 和 media 文件夹，以及 index.html。css 文件夹中放 index.less 和字体图标资源样式，js 文件夹中放 index.js，imgs 文件夹中放图片资源，media 文件夹放字体图标的相关资源，代码如下所示：

index.less

#box {
    width: 200px;
    height: 200px;
    background-image: url('../imgs/angular.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

index.js

import '../css/iconfont.css';
import '../css/index.less';

function add(x, y) {
    return x + y;
}

console.log(add(1, 2));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开发环境</title>
</head>
<body>
    <h1>开发环境配置</h1>
    <span class="iconfont icon-icon-test"></span>
    <span class="iconfont icon-icon-test2"></span>
    <span class="iconfont icon-icon-test3"></span>
    <span class="iconfont icon-icon-test1"></span>
    <div id="box"></div>
    <img src="./imgs/vue.jpg" alt="vue">
    <img src="./imgs/react.png" alt="react">
</body>
</html>

创建 webpack.config.js 文件，通过 require 引入 path 和 html-webpack-plugin，entry 是入口文件，output 是出口文件，filename 是打包输出后的文件名，path 是输出路径。module 是 loader 的配置，rules 是详细的 loader 配置。第一个规则是处理 less 资源，匹配以 .less 结尾的文件，使用的 loader 是 style-loader、css-loader 和 less-loader。第二个规则是处理 css 资源，匹配以 .css 结尾的文件，使用的 loader 是 style-loader 和 css-loader。第三个规则是处理图片资源，匹配以 jpg、png 和 gif 结尾的文件图片资源，使用的 loader 是 url-loader，进行 options 配置，limit 是限制图片的大小小于8kb，就会被base64处理，给图片做优化，name 给图片做重命名，取 hash 值的前 10 位，取文件的原来扩展名，关闭 es6 模块化，输出路径为 imgs。第四个规则是处理 html 中的 img 资源，匹配以 .html 结尾的文件，使用的 loader 是 html-loader。由于处理图片资源采用的是 ES6 module 解析，而 html 文件中的 img 资源使用 commonJS 解析，会造成冲突，需要关闭 ES6 module。第五个规则是处理其它资源，使用 exclude 不包括上面的所有资源，html|css|js|less|jpg|png|gif，使用 file-loader，通过 options 配置 name 的值为取 hash 值的前 10 位，取文件的原来扩展名，通过 outputPath 设置输出路径为 media。plugins 里面是一些插件配置，通过 new HtmlWebpackPlugin()，复制里面的文件，并自动引入打包输出的所有资源（JS/CSS），设置 mode 模式为 development 开发模式。在 devServer 中，contentBase 是项目构建后路径，compress 是启动 gzip 压缩，port 是端口号，open 是自动打开浏览器，代码如下所示：

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [           
            {              
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    name: '[hash:10].[ext]',
                    esModule: false,
                    outputPath: 'imgs'
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                exclude: /\.(html|css|js|less|jpg|png|gif)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'media'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development',
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        compress: true,
        port: 3000,
        open: true
    }
}

在命令行输入 npx webpack-dev-server 命令，项目就会自动打包编译。每次在更改完代码后，自动编译看到最新的显示内容。在 build 打包文件中，也可以看到打包后的 css、js、imgs 和 media 文件夹，以及 index.html。

城南花开ze

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 手摸手学习系列之配置 devServer 和配置开发环境

一、webpack 配置 devServer创建空文件夹，通过 npm init 命令初始化 package.json 文件，通过 npm install webpack webpack-cli -g 命令全局下载 webpack 和 webpack-cli，通过 npm install webpack webpack-cli -D 命令本地下载 webpack 和 webpack-cli，通过 npm i style-loader css-loader -D 命令下载 style-loader 和
复制链接

扫一扫

专栏目录