Webpack4学习（一）基础入门操作 作者：pandali 时间：2021年09月18日 分类：计算机技术,JS,Html 字数：1939 warning: 这篇文章距离上次修改已过277天，其中的内容可能已经有所变动。 [官方文档](https://webpack.docschina.org/concepts/ "官方文档") 文章按照webpeck4. 的版本记录，但是本人用的时webpack5，所以会记录一些中间遇到的问题 ### 五个基本组成部分 ##### 入口 Entry ``` entry:"./src/index.js" 入口文件位置 ``` ##### 输出 Output ``` import {resolve} from "path" output:{ filename:"index.js", # 输出文件名称 path:resolve(__dirname,'dist') #输出文件位置 } ``` ##### 加载项 Loader ``` module:{ rules:[ { test:/\.css$/,#匹配css文件 use:[ #将js 中css内容放到header中 "style-loader", # 将css内容打包到js中 "css-loader" ] }, { test:/\.less$/, #匹配less文件 use:[ "style-loader", "css-loader", # 将less文件打包成css文件 "less-loader" ] }, { test:/\.(jpg|png|jpeg|gif)$, #匹配图片 use:[ "url-loader" #url-loader 依赖file-loader,安装时需要打包安装 ], options:{ #配置参数 limit:4 * 1024, # 小于4k的打包成base64格式 esModule:false # urlloader默认使用es6模块化解析，需要使用commonjs解析时，配置关闭，否则会导致图片路径错误 } }, { exclude:/\.(css|js|jpg|png|jpeg|gif)$/, #排除指定后缀的文件 use:[ "file-loader" ] } ] } ``` ##### 插件 Plugins loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务 例如： ``` let HtmlWebpackPlugin = require('html-webpack-plugin'); # 通过 npm 安装 let webpack = require('webpack'); // 访问内置的插件 plugins:[ new webpack.ProgressPlugin(), new HtmlWebpackPlugin( { template: './src/index.html' } ), ] ``` ##### 模式 模式有两种：development、production mode:"development" ### 实践遇到的问题 #### 1.webpack : 无法加载文件 D:\nodejs\node_global\webpack.ps1，因为在此系统上禁止运行脚本 ##### 解决办法： 1.以管理员身份运行vs code 2.执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止的 3.执行：set-ExecutionPolicy RemoteSigned 4.这时再执行get-ExecutionPolicy，就显示RemoteSigned #### import { resolve } from 'path' 报错 ##### 解决办法 记错了引入方式，语法错误： 改成 const {resolve} = require("path") #### html/css中使用图片，图片名称正确，但是图片内容错误 打开图片显示loading image... 原因是webpack5打包时不用配置image，会自动打包 ##### 解决办法 安装webpack4