webpack的基本配置一

weixiwo

已于 2023-10-09 09:13:33 修改

阅读量288

点赞数

分类专栏： webpack 文章标签： webpack

于 2020-10-29 20:30:32 首次发布

本文链接：https://blog.csdn.net/weixiwo/article/details/109368115

版权

webpack 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

webpack

1.webpack简介

在入口文件中,构建成chunk.js,再打包成bundle.js
在webpack看来,前端所有资源文件(js/json/img/less)都会作为模块处理。他会根据模块的依赖进行静态分析,打包生成对应的静态资源（bundle)

2.webpack核心概念

Entry：

入口提示webpack以那个文件作为起点开始打包,分析构建内部依赖图

output:

输出output指示webpack打包后的资源bundles输出到哪里去,以及如何命名

loader:

让webpack能够去处理那些非js文件，webpack自身只能理解javascript

plugins:

插件可以用于执行范围更广的任务，插件的范围包括打包优化和压缩，一直到重新定义环境中的变量

mode:

指示mode指示webpack使用响应模式的配置

development 能让代码本地调试运行的环境

production能让代码优化上线的环境

3.webpack的初体验

1.npm init，运行完毕之后,就会初始化一个package.json文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XI7EqARS-1603973515608)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20201027191047081.png)]

2.npm i webpack webpack-cli -g 之后就可以使用webpack的指令，全局安装

3.npm i webpack webpack-cli -D,本地安装

4.在新建结构build,src,index.js
在这里插入图片描述

这里index.js是一个入口文件
在这里插入图片描述

5.运行指令

开发环境：webpack ./src/index.js -o ./build/build.js --mode=development

webpack会以./src/index.js 为入口文件.打包后输出到./build/build.js,整体打包环境是开发环境

生成环境指令：webpack ./src/index.js -o ./build/build.js --mode=production 整体打包环境是生产环境

结论：1.webpack能处理js/json，但是不能处理css/img等其他资源

2.开发环境可以将es6模块编译成浏览器能识别的模块化

3.生产环境比开发环境多一个压缩代码

4.打包样式资源

在这里插入图片描述
如果使用css，webpack不能直接打包，就打包失败了

所以要新建一个webpack.config.js的配置文件：

作用：就是指示webpack作用,当我们运行时的时候,会加载里面的配置，所有构建工具node.js平台运行的,模块化默然采用commonjs

webpack基本配置

const {
    resolve
} = require('path');
//resolve用来拼接绝对路径的方法
module.exports = {
    //webpack配置
    //入口文件
    entry: "./src/index.js",
    // 输出
    output: {
        // 输出文件名
        filename: 'main.js',
        // 输出路径
        // __dirname nodejs变量,代表当前文件的目录绝对路径
        path: resolve(__dirname, 'build/build.js')
    },
    module: {
        rules: [
            //详细的node配置
            {
                //匹配哪些文件
                test: /\.css$/,
                use: [
                    // use数组loader执行顺序,从下到上,从左到右,依次执行
                    //创建style标签,将js中的样式资源插入进行中,添加到head中
                    'style-loader',
                    // 将css文件中变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader',
                ]
            }
        ]
    },
    //插件的配置
    plugins: 
        [
            //详细的plugins配置
        ],
    mode: 'development'

}

因为在其中需要使用loader,所以我们需要下载loader

npm i css-loader style-loader -D
然后在build/build.js下的文件夹中,新建一个index.html，之后再引入main.js

思路：当运行webpack时,会将先进入entry进入index.js，首先分析里面的内部依赖图,发现了需要引入的资源,资源进入loader进行处理，然后输出路径就有output指定的路径,modules下面的rules下面的对象，通过test去检测文件类型，通过use使用哪些loader。每种文件需要配置不同的文件，才能处理好

在使用index.less之后，需要使用less-loader,不然会报错,下载less-loader之后，还是依然会报错，还需要下载less，之后就正确了

5.打包html资源

loader 1.下载 2.使用(配置loader)

plugins 1.下载 2.引入 3.使用

运行指令 npm i html-webpack-plugin -D
在webpack.config.js下写

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

在plugins里写入 new HtmlWebpackPlugin（）

功能：再次打包之后，就会自动创建一个空的html文件，然后引入打包后的所有资源(js/css资源)
需求：需要有结构的html文件

plugins: 
        [
            //详细的plugins配置
            //html-webpack-plugin，引入html的plugin插件
            // 插件需要引入
            new HtmlWebpackPlugin(
               {
                //复制 ./src/index.html文件,并自动打包输出所有资源
                template:'./src/index.html'
               },
            )
        ],

6.打包图片资源

在src/index.html中，在src中引入图片
此时去执行打包是会报错的，需要单独对图片进行处理

这时就需要引入处理图片的资源处理图片的loader

需要下载url-loader和file-loader,因为url-loader依赖于file-loader，这时webpack处理图片资源的配置

 {
                test:/\.(jpg|png|gif)$/,
                // 如果使用use就是使用多个loader，但是我们这里就需要使用一个loader
                loader:'url-loader',
                // 需要下载url-loader和file-loader,因为url-loader依赖于file-loader
                options:{
                    // 图片大小小于8kb，就会被base64处理,就直接打包成base64的处理,直接在页面显示
                    // 优点：减少请求数量(减轻服务器压力)
                    // 缺点：图片体积会更大，文件请求会更慢一点
                    limit:8*1024
                }
            }

但是上面只是在样式文件中引入图片资源，还没在html中引入图片资源，还需要做如下配置,就会处理不了img这张图片，就会解析不出来会需要配置loader

需要下载html-loader

运行npm i html-loader -D

{
                test:/\.html$/,
                // html-loader是处理html文件的img图片的(负责引入img。从而能被url-loader进行处理)
                loader:'html-loader'
            }

照着学了之后发现运行之后依然报错
需要添加在output中添加内容
output: { // 输出文件名 filename: 'main.js', // 输出路径 // __dirname nodejs变量,代表当前文件的目录绝对路径 path: resolve(__dirname, 'build/build.js'), **publicPath: './',** },’

并附上最终版的webpack.config.js的基本配置代码

const {
    resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { Template } = require('webpack');
//resolve用来拼接绝对路径的方法
module.exports = {
    //webpack配置
    //入口文件
    entry: "./src/index.js",
    // 输出
    output: {
        // 输出文件名
        filename: 'main.js',
        // 输出路径
        // __dirname nodejs变量,代表当前文件的目录绝对路径
        path: resolve(__dirname, 'build/build.js'),
        publicPath: './',
    },
    module: {
        rules: [
            //详细的node配置
            // 不同文件必须配置不同loader处理
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    // 将less文件编译成css文件
                    // 并且不能复用
                    'less-loader'
                ]
            },
            {
                //匹配哪些文件
                test: /\.css$/,
                use: [
                    // use数组loader执行顺序,从下到上,从左到右,依次执行
                    //创建style标签,将js中的样式资源插入进行中,添加到head中
                    'style-loader',
                    // 将css文件中变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader',
                ]
            },
            {
                test:/\.(jpg|png|gif)$/,
                // 如果使用use就是使用多个loader，但是我们这里就需要使用一个loader
                loader:'url-loader',
                // 需要下载url-loader和file-loader,因为url-loader依赖于file-loader
                options:{
                    // 图片大小小于8kb，就会被base64处理,就直接打包成base64的处理,直接在页面显示
                    // 优点：减少请求数量(减轻服务器压力)
                    // 缺点：图片体积会更大，文件请求会更慢一点
                    limit:8*1024,
                    // 问题：因为url-loader默任使用es6模块化解析,而html-loader引入图片是commenjs,所以解析时会报错
                    // 解决:关闭url-loader的es6模块化,使用commonjs解析
                    // esModule:false,
                    // [hash:10]去图片的hash的前十位
                    // [ext]取文件原来扩展名
                    // 将名字变小
                    name:'[hash:10].[ext]'
                }
            },
            {
                test:/\.html$/,
                // html-loader是处理html文件的img图片的(负责引入img。从而能被url-loader进行处理)
                loader:'html-loader'
            },
            // 打包其他资源,就是除了css,html,js的资源
            // {
            //     exclude:/\.(css|js|html)$/,
            //     loader:'url-loader',
            // }
        ]
    },
    //插件的配置
    plugins: 
        [
            //详细的plugins配置
            //html-webpack-plugin，引入html的plugin插件
            // 插件需要引入
            new HtmlWebpackPlugin(
               {
                //复制 ./src/index.html文件,并自动打包输出所有资源
                template:'./src/index.html'
               },
            )
        ],
    mode: 'development'
}

下一次继续更新webpack，大家加油！

weixiwo

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
webpack的基本配置一

webpack1.webpack简介在入口文件中,构建成chunk.js,再打包成bundle.js在webpack看来,前端所有资源文件(js/json/img/less)都会作为模块处理。他会根据模块的依赖进行静态分析,打包生成对应的静态资源（bundle)2.webpack核心概念Entry：入口提示webpack以那个文件作为起点开始打包,分析构建内部依赖图output:输出output指示webpack打包后的资源bundles输出到哪里去,以及如何命名loader:让webp
复制链接

扫一扫