webpack之webpack.config.js配置

最新推荐文章于 2024-03-29 10:46:43 发布
最新推荐文章于 2024-03-29 10:46:43 发布
阅读量2.2w 收藏 79
点赞数 19
分类专栏： webpack 文章标签： javascript js 前端 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chen4565/article/details/118093586
版权

webpack之webpack.config.js配置

wbepack.config.js webpack的配置文件详解:

​ 作用: 指示 webpack 干那些活(当你运行 webpack 指令时, 会加载里面的配置)

​ 所有构建工具都是基于node.js平台运行的~模块化默认采用commonjs,

​ 概念:我们创建的src文件是我们写项目的源代码,用的是ES6模块化

​ 而wbepack.config.js文件是我们写配置的源代码,默认用的是commonjs
 

使用webpack配置文件进行打包

首先在我们原来的webpack-dome项目中创建一个webpack.config.js文件

在这里插入图片描述

然后就可以在webpack.config.js文件中写配置代码, 代码内容如下:

const path = require('path') // 引用path模块
module.exports = {  // 这里是commrnt.js语法
    // 入口文件
    entry:"./src/index.js",
    // 打包后的出口文件
    output:{
        // 输出的路径  是绝对路径(导入path模块) 这里是用node来做的
        path:path.resolve(__dirname,'build'),
        // 输出的文件名称
        filename:'build.js',
    },
    // 使用开发模式打包
    mode:"development"
}

/*
    npm安装时-S -D作用及区别:
        -S 即--save（保存）
        包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在
        -D 即--dev（生产）
        包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel,sass-loader这些解析器

        打包是在npm上运行命令, 一般来说你在配置完成 webpack.config.js 后,你打包时执行的命令是webpack ,但你也可以执行 npm run build 来进行打包,
        如何实现: 在package.json中的scripts下多加一行 "build": "webpack" ,就可以使用 npm run build
        他们的区别:
            在终端直接执行webpack命令,使用的是全局安装的webpack,
            当在package.js中定义了scripts时, 其包含了webpack命令,那么使用的是局部的webpack 
            
        运行命令
        开发环境: webpack ./src/index.js -o ./build/build.js --mode=development
        生产环境: webpack ./src/index.js -o ./build/build.js --mode=production
        添加能使css一起打包的插件: npm i css-loader style-loader -D
        添加能使scss一起打包的插件: npm install sass-loader node-sass webpack -D  因为你刚刚下载过 css-loader style-loader所以不用再次下载了
        添加能使html一起打包的插件: npm i html-webpack-plugin -D
        添加能使图片打包的插件: npm i url-loader file-loader -D
        添加能使html中图片打包的插件: npm i html-loader -D
        添加能使浏览器自动更新(刷新)的插件: npm i webpack-dev-server -D
*/

/*
    loader 的使用: 1)下载  2)使用 (配置loader)
    plugins 的使用: 1)下载 2)引用 3)使用

    wbepack.config.js  webpack的配置文件
        作用:  指示 webpack 干那些活(当你运行 webpack 指令时, 会加载里面的配置)

        所有构建工具都是基于node.js平台运行的~模块化默认采用commonjs, 
        概念:我们创建的src文件是我们写项目的源代码,用的是ES6模块化
             而wbepack.config.js文件是我们写配置的源代码,默认用的是commonjs
*/

所以,我在这里运行的命令是:

npm run build

 

loader的使用

在原来的基础上在src文件夹中创建一个css文件，然后在index.js中引入

在这里插入图片描述

为什么要用loader,因为webpack中默认是不支持js中引入css的，所以要用到 loader

然后就可以在webpack.config.js文件中写配置代码, 代码内容如下:

const path = require('path') // 引用path模块

module.exports = {  // 这里是commrnt.js语法
    // 入口文件
    entry:"./src/index.js",
    // 打包后的出口文件
    output:{
        // 输出的路径  是绝对路径(导入path模块) 这里是用node来做的
        path:path.resolve(__dirname,'build'),
        // 输出的文件名称
        filename:'build.js',
    },
    // loader的配置
    module:{
        rules:[
            // 详细loader配置

            // 打包css的配置
            {
                // 使用正则表达式,匹配那些文件
                test: /\.css$/,
                use:[
                    // use数组中loader执行顺序, 从右到左, 从下到上, 依次执行
                    // 创建style标签, 将js中的样式资源插入进行, 添加到head中生效
                    'style-loader',
                    // 将css文件变成commitjs模块加载js中, 里面的内容是样式字符串
                    'css-loader'
                ]
            }
        ]
    },
    // 使用开发模式打包
    mode:"development"
}

添加能使css一起打包的插件,运行命令为: npm i css-loader style-loader -D

执行打包命令: npm run build   查看结果

 

loader的使用之打包scss

在原来的基础上在src文件夹中创建一个scss文件，然后在index.js中引入

在这里插入图片描述

然后就可以在webpack.config.js文件中写配置代码, 代码内容如下:

const path = require('path') // 引用path模块

module.exports = {  // 这里是commrnt.js语法
    // 入口文件
    entry:"./src/index.js",
    // 打包后的出口文件
    output:{
        // 输出的路径  是绝对路径(导入path模块) 这里是用node来做的
        path:path.resolve(__dirname,'build'),
        // 输出的文件名称
        filename:'build.js',
    },
    // loader的配置
    module:{
        rules:[
            // 详细loader配置

            // 打包css的配置
            {
                // 使用正则表达式,匹配那些文件
                test: /\.css$/,
                use:[
                    // use数组中loader执行顺序, 从右到左, 从下到上, 依次执行
                    // 创建style标签, 将js中的样式资源插入进行, 添加到head中生效
                    'style-loader',
                    // 将css文件变成commitjs模块加载js中, 里面的内容是样式字符串
                    'css-loader'
                ]
            },
            // 打包scss的配置
            {
                test: /\.scss$/,
                // 注意 是sass-loader ，不是 scss-loader
                // 是数组,代表的是要使用多个loader处理,用use
                use: [ 
                    'style-loader', 
                    'css-loader', 
                    // 将scss文件编译成css文件
                    'sass-loader' 
                ]
            }
        ]
    },
    // 使用开发模式打包
    mode:"development"
}

添加能使scss一起打包的插件,运行命令为: npm install sass-loader node-sass webpack -D  
因为你刚刚下载过 css-loader style-loader所以不用再次下载了

执行打包命令: npm run build   查看结果

 

打包html资源的插件使用

作用: 将src的html文件进行打包, 在打包完成后在build文件夹中生成一个html文件, 并且会对这个html文件做处理,自动帮你把使用的文件引用进去

然后就可以在webpack.config.js文件中写配置代码, 代码内容如下:

const path = require('path') // 引用path模块
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入html-webpack-plugin

module.exports = {  // 这里是commrnt.js语法
    // 入口文件
    entry:"./src/index.js",
    // 打包后的出口文件
    output:{
        // 输出的路径  是绝对路径(导入path模块) 这里是用node来做的
        path:path.resolve(__dirname,'build'),
        // 输出的文件名称
        filename:'build.js',
    },
    // loader的配置
    module:{
        rules:[
            // 详细loader配置

            // 打包css的配置
            {
                // 使用正则表达式,匹配那些文件
                test: /\.css$/,
                use:[
                    // use数组中loader执行顺序, 从右到左, 从下到上, 依次执行
                    // 创建style标签, 将js中的样式资源插入进行, 添加到head中生效
                    'style-loader',
                    // 将css文件变成commitjs模块加载js中, 里面的内容是样式字符串
                    'css-loader'
                ]
            },
            // 打包scss的配置
            {
                test: /\.scss$/,
                // 注意 是sass-loader ，不是 scss-loader
                // 是数组,代表的是要使用多个loader处理,用use
                use: [ 
                    'style-loader', 
                    'css-loader', 
                    // 将scss文件编译成css文件
                    'sass-loader' 
                ]
            }
        ]
    },
    // plugins的配置
    plugins:[
        // 详细plugins的配置

        // 因为是直接引的,所以 new 就好了
        // 功能:默认会创建一个空的HTML文件,自动引入打包输出的所有资源(JS/CSS)
        new HtmlWebpackPlugin({
			// 复制 './src/index.html'文件,并自动引入打包输出的所有资源(JS/CSS)
			template:'./src/index.html'
		})
    ],  
    // 使用开发模式打包
    mode:"development"
}

添加能使html一起打包的插件,运行命令为: npm i html-webpack-plugin -D

执行打包命令: npm run build   查看结果

打包图片资源文件

首先在src文件夹中复制三张图片, 之后在sass中引入, 最后在html文件中展示

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

然后就可以在webpack.config.js文件中写配置代码, 代码内容如下:

const path = require('path') // 引用path模块
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入html-webpack-plugin

module.exports = {  // 这里是commrnt.js语法
    // 入口文件
    entry:"./src/index.js",
    // 打包后的出口文件
    output:{
        // 输出的路径  是绝对路径(导入path模块) 这里是用node来做的
        path:path.resolve(__dirname,'build'),
        // 输出的文件名称
        filename:'build.js',
    },
    // loader的配置
    module:{
        rules:[
            // 详细loader配置

            // 打包css的配置
            {
                // 使用正则表达式,匹配那些文件
                test: /\.css$/,
                use:[
                    // use数组中loader执行顺序, 从右到左, 从下到上, 依次执行
                    // 创建style标签, 将js中的样式资源插入进行, 添加到head中生效
                    'style-loader',
                    // 将css文件变成commitjs模块加载js中, 里面的内容是样式字符串
                    'css-loader'
                ]
            },
            // 打包scss的配置
            {
                test: /\.scss$/,
                // 注意 是sass-loader ，不是 scss-loader
                // 是数组,代表的是要使用多个loader处理,用use
                use: [ 
                    'style-loader', 
                    'css-loader', 
                    // 将scss文件编译成css文件
                    'sass-loader' 
                ]
            },
            {
                // 问题:默认处理不了html中img图片
                // 处理图片资源
                test: /\.(jpg|png|gif)/,
                // 使用一个loader时,直接写就行了
                loader:'url-loader',
                options:{
                    // 图片大小小于8KB,就会被base64处理
                    // 优点:减少请求数量(减轻服务器压力)
                    // 缺点:图片体积会增大, 就会导致文件请求速度更慢
                    limit: 8 * 1024,
                    // 问题: 因为url-loader默认使用es6模块化解析, 
                    // 而html-loader引入图片commonjs
                    // 解析时会出问题: [object Module]
                    // 解决: 关闭url-loader的es6模块化, 使用commonjs解析
                    esModule: false,
                    // 给图片进行重命名
                    // [hash:10]取图片的hash的前10位
                    // [ext]去文件原来扩展名
                    name: '[hash:10].[ext]'
                }
            },
            {
                test:/\.html$/,
                // 处理html文件的img图片 (负责引入img, 从而能被url-loader进行处理)
                loader:'html-loader'
            }
        ]
    },
    // plugins的配置
    plugins:[
        // 详细plugins的配置

        // 因为是直接引的,所以 new 就好了
        // 功能:默认会创建一个空的HTML文件,自动引入打包输出的所有资源(JS/CSS)
        new HtmlWebpackPlugin({
			// 复制 './src/index.html'文件,并自动引入打包输出的所有资源(JS/CSS)
			template:'./src/index.html'
		})
    ],  
    // 使用开发模式打包
    mode:"development"
}

添加能使图片打包的插件,运行命令为: npm i url-loader file-loader -D
添加能使html中图片打包的插件,运行命令为: npm i html-loader -D

执行打包命令: npm run build   查看结果

 

热更新 devServer

通过devServer进行热更新, 代码内容如下:

const path = require('path') // 引用path模块
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入html-webpack-plugin

module.exports = {  // 这里是commrnt.js语法
    // 入口文件
    entry:"./src/index.js",
    // 打包后的出口文件
    output:{
        // 输出的路径  是绝对路径(导入path模块) 这里是用node来做的
        path:path.resolve(__dirname,'build'),
        // 输出的文件名称
        filename:'build.js',
    },
    // loader的配置
    module:{
        rules:[
            // 详细loader配置

            // 打包css的配置
            {
                // 使用正则表达式,匹配那些文件
                test: /\.css$/,
                use:[
                    // use数组中loader执行顺序, 从右到左, 从下到上, 依次执行
                    // 创建style标签, 将js中的样式资源插入进行, 添加到head中生效
                    'style-loader',
                    // 将css文件变成commitjs模块加载js中, 里面的内容是样式字符串
                    'css-loader'
                ]
            },
            // 打包scss的配置
            {
                test: /\.scss$/,
                // 注意 是sass-loader ，不是 scss-loader
                // 是数组,代表的是要使用多个loader处理,用use
                use: [ 
                    'style-loader', 
                    'css-loader', 
                    // 将scss文件编译成css文件
                    'sass-loader' 
                ]
            },
            {
                // 问题:默认处理不了html中img图片
                // 处理图片资源
                test: /\.(jpg|png|gif)/,
                // 使用一个loader时,直接写就行了
                loader:'url-loader',
                options:{
                    // 图片大小小于8KB,就会被base64处理
                    // 优点:减少请求数量(减轻服务器压力)
                    // 缺点:图片体积会增大, 就会导致文件请求速度更慢
                    limit: 8 * 1024,
                    // 问题: 因为url-loader默认使用es6模块化解析, 
                    // 而html-loader引入图片是commonjs
                    // 解析时会出问题: [object Module]
                    // 解决: 关闭url-loader的es6模块化, 使用commonjs解析
                    esModule: false,
                    // 给图片进行重命名
                    // [hash:10]取图片的hash的前10位
                    // [ext]去文件原来扩展名
                    name: '[hash:10].[ext]'
                }
            },
            {
                test:/\.html$/,
                // 处理html文件的img图片 (负责引入img, 从而能被url-loader进行处理)
                loader:'html-loader'
            }
        ]
    },
    // plugins的配置
    plugins:[
        // 详细plugins的配置

        // 因为是直接引的,所以 new 就好了
        // 功能:默认会创建一个空的HTML文件,自动引入打包输出的所有资源(JS/CSS)
        new HtmlWebpackPlugin({
			// 复制 './src/index.html'文件,并自动引入打包输出的所有资源(JS/CSS)
			template:'./src/index.html'
		})
    ],  
    // 使用开发模式打包
    mode:"development",

    // 开发服务器 devServer:用来自动化(自动编译,自动打开浏览器,自动刷新浏览器)
    // 用简单概括就是: 热更新
    // 特点:只会在内存中编译打包,不会有任何输出
    // 启动指令: webpack-dev-server 你也可以在package.json文件中重新修改指令
	devServer:{
        contentBase:path.resolve(__dirname,'build'),
        // 启动gzip压缩
        compress:true,
        // 修改端口号
        port:8080,
        //自动打开浏览器
		open:true
    }
}

添加能使浏览器自动更新(刷新)的插件,运行命令为: npm i webpack-dev-server -D

执行命令: webpack-dev-server 启动服务器,修改代码查看结果

 

注意

1.各种命令不要写错
2.有报错学会翻译看报错, 多去百度

 

总结

以上就是作者自己整理的关于webpack的功能和插件的简单使用,希望广大读者喜欢, 感谢大家
江北阳小皮～
关注
  • 19
    点赞
  • 踩
  • 79
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
webpack教程之webpack.config.js配置文件
10-19
本篇文章主要介绍了webpack教程之webpack.config.js配置文件 ，具有一定的参考价值，有兴趣的可以了解一席
webpack.config.js(详解)
山海也有意难平
08-05 3215
module.exports = { publicPath: './',//设置的就是域名根目录到项目文件根目录间的url。 outputDir: 'motorway',//打包后生成的文件目录名 assetsDir: 'static',//静态资源目录 lintOnSave: process.env.NODE_ENV === 'development',//设置是否在开发环境下每次保存代码时都启用 eslint验证。 productionSourceMap: false,//设置是否.
到现在了还不会Webpack？我帮你总结好了
最新发布
2401_83329402的博客
03-29 849
因为当我们访问默认的 http://localhost:8080/的时候，看到的是一些文件和文件夹，想要查看我们的页面,还需要点击文件夹点击文件才能查看，那么我们希望默认就能看到一个页面，而不是看到文件夹或者目录。通过loader打包非js模块：默认情况下，webpack只能打包js文件，如果想要打包非js文件，需要调用loader加载器才能打包。默认情况下，我们更改入口js文件的代码，需要重新运行命令打包webpack，才能生成出口的js文件。
webpack简介及webpack.config.js的配置
baibaider的博客
03-18 1755
基本信息：// webpack在执行时，除在命令行传入参数，还可以通过指定的配置文件来执行。默认会搜索当前目录下webpack.config.js。 // 这个文件是一个node.js模块，返回一个json格式的配置对象，或者通过--config选项来指定配置文件。 var webpack = require('webpack'); module.exports = { entry:'./en...
webpack.config.js
08-19
webpack之代码打包分离-DllReferencePlugin及DllPlugin
webpack.config.easy.js
04-20
webpack.config.js 实现三方插件与公共代码抽离的基本配置，CommonsChunkPlugin的配置使用
webpack.config.js配置文件
06-19
最近刚学的webpack3.0，从零到一套相对比较齐全的配置
webpack2-webpack.config.js配置
weixin_30588827的博客
02-21 150
写在前面： 　　了解更多：https://github.com/miaowwwww/webpack-learn 　　贴一个webpack.ocnfig.js 的配置属性表　　　　 一、代码分割： 　　1.插件CommonsChunkPlugin ：提取vendor的插件，过滤每一个入口文件，提取公共的模块，放到一个vendor.js文件中 　　　　 　　2.css代码...
浅谈webpack的重要功能——Plugins
热门推荐
筱葭的博客
04-03 1万+
webpack中另一个非常重要的功能是Plugins。 插件（Plugins）是用来拓展webpack功能的，它们会在整个构建过程中生效，执行相关的任务。 Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西：Loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个;插件并不直接操作单个文件，它直接对整个构建过程其作用。 webpac
webpack.config.js基本配置
m0_47300798的博客
04-24 214
一、webpack.config.js基本配置 const path=require("path"); module.exports = { //输入 entry: './main.js', //输出 output: { filename: './out.js' } }; // ./表示当前目录 // ../表示上一级目录 ...
详解weex默认webpack.config.js改造
10-18
本篇文章主要介绍了详解weex默认webpack.config.js改造，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
没有webpack.config.js如何配置less ？？
01-08
首先我们最新创建的项目；无论是vue或者react项目，你都找不到webpack.config.js，甚至没有原来的build文件夹，那我们如何配置less或者jq这种插件呢？接下来进入正题 配置less 1.安装less less-loader  打开我们的项目目录，打开CMD终端，安装命令如下 yarn add less less-loader 或者 npm install less less-loader 2.git commit一下 git add . git commit -m 'xx' 3. yarn eject生成config目录及你想要的webpack.config.js 在
webpack4 TypeError: htmlWebpackPlugin.getHooks is not a function
maggie_live的博客
05-31 3664
1.使用vue-cli3，打包产生的问题； 解决方案： npm i htnl-webpack-plugin@next 参考 https://github.com/jantimon/html-webpack-plugin/issues/1068
小白webpack教程！webpack.config,js 入坑
猛猛的博客
07-10 507
写在前面： &emsp相信刚刚开始学前端的朋友都听说过webpack，但是仅仅是听说，去找工作的时候面试官又经常问到，自己平时写练习做项目的时候也是直接使用框架中的脚手架。对于其中的内容还不是特别了解，这篇文章将通过一个小练习对webpack.config.js的内容进行一个简单的说明，让刚刚开始学习webpack的朋友有一个初步的了解。 ...
webpack的配置文件
u010620152的博客
11-27 449
const path = require('path'); module.exports = { entry: "./app/entry", // string | object | array // 这里应用程序开始执行 // webpack 开始打包 output: { // webpack 如何输出结果的相关选项 path: path.resolv
webpack配置 webpack.config.js
11-02
webpack是一个现代JavaScript应用程序的静态模块打包器。webpack.config.js是webpack的配置文件，用于指定webpack的打包规则和插件等。下面是一个简单的webpack.config.js的示例： ```javascript // 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: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] } }; ``` 上述配置文件中，entry指定了入口文件，output指定了输出文件的名称和路径，module.rules指定了打包规则，这里使用了babel-loader将ES6语法转换为ES5语法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值