webpack4局部安装及配置文件各种模块loader踩坑——自学笔记

最新推荐文章于 2024-09-23 09:42:46 发布

weixin_42642756

最新推荐文章于 2024-09-23 09:42:46 发布

阅读量623

点赞数 1

分类专栏： webpack 文章标签： webpack配置 vue node版前置学习

本文链接：https://blog.youkuaiyun.com/weixin_42642756/article/details/102423198

版权

webpack 专栏收录该内容

1 篇文章

订阅专栏

1.首先需要安装nodejs，node下载官网

2.安装完毕后指定某一文件夹开始搭建webpack项目

这里使用cmd方式
1.找到你要安装的目录，然后使用命令npm init -y，目的是初始化文件夹，然后在文件夹中会自动添加package.json文件，该文件为nodejs配置文件

2.为了使用webpack命令，执行命令npm install webpack webpack-cli -D,意思就是安装webpack和webpack-cli到项目中，这里的-D就是局部安装到开发环境的意思，安装完成后会在package.json中的devDependencies对象中看到你所安装的webpack等环境插件。同时会出现一个node_modules文件夹，该文件夹为储存webpage环境及其命令的包，一切环境都会在这个里面

3.运行webpack，这里需要使用==npx webpack -h ==命令来测试一下 webpack命令是否可用，-h查看帮助，所有基于webpack的打包都会用npx命令来执行webpack，否则会报错如无法识别啊，需要下载全局等等问题，本人亲自踩坑

在这里插入图片描述

如果出现如上信息(信息太多只贴了一点点)，则证明可用，然后测试一下打包文件的效果
直接在根目录新建一个js
在这里插入图片描述
直接输入

npx webpack ./index.js ./index.bundle.js

这时会报异常

改为npx webpack ./index.js -o ./index.bundle.js后即可

npx webpack ./index.js -o ./index.bundle.js

如图，打包成功，根目录下出现了我们想要的index.bundle.js的文件。

webpack.config.js配置文件

后续需要配置webpack的配置文件。
文件名一般固定为webpack.config.js
这是目前的目录结构：

介绍一下当前的一个webpack.config.js中的entry入口对象，指代js主代码路径
在这里插入图片描述

接下来就是配置出口函数output
在这里插入图片描述

这里需要用到node本身的一个函数path，这是指代的当前目标地址，然后在output中拼接path，使用它自带的一个方法resolve()，其中的__dirname是指代的文件名称，第二个参数就是我们的导出目录了，这样就会拼接出一个绝对路径出来，如果直接使用==./dist/bundle.js==会出现无效的地址，并注明需要绝对地址

接下来就是给这段命令配置一个别名了
在这里插入图片描述

这里需要在package.json中添加脚本信息build指定命令npx webpack
接下来只需要执行npm run build即可，（必须要有webpack.config.js文件，因为该命令执行的是npx webpack 它会去找是否有webpack.config.js，如果没有是会报错的）
在这里插入图片描述

解决这个问题后，接下来就是为webpack解析css，less，img等等loader的问题了，如果不加载这些模块，项目中的这些文件是无法结合js使用的哦
在这里插入图片描述
在webpack中文网中找到右边的LOADERS选项，即可看到
分别介绍一下
css-loader安装

npm install --save-dev css-loader

style-loader安装

npm install style-loader --save-dev

记住这里必须要安装style-loader，因为你的css文件必须作用在style中，style可以很好的嵌入到html中，如果不加入style-loader，将不能渲染css文件到dom元素。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

按照官网给的提示来，且需要注意的是use中使用模块时是从右往左依次加载的，而css-loader依赖于style-loader，所以顺序是不能错的

然后在你需要的js文件中导入即可

require(’./css/index.css’)

配置好后执行npm run build打包

less文件

npm install --save-dev less-loader less

这里需要注意的就是还需要安装一个less依赖
在webpack.config.js的module的rules中加入

{
				test:/\.less$/,
				use:[
					{
						loader:'style-loader'
					},
					{
						loader:'css-loader'
					},
					{
						loader:'less-loader'
					}
				]
			}

顺序依然不能乱，毕竟还是从右往左看的

接下来是文件的加载如img

npm install --save-dev url-loader

{
				test:/\.(png|jpg|gif)$/,
				use: [
				       {
				         loader: 'url-loader',
				         options: {
				            limit: 8192
				        }
				    }
				]
			}

在这里插入图片描述
这里就可以使用所以通过url来引入的文件了，但是这里有个问题，webpack.config.js中url的规则选项中表明了可传入文件的大小，这里是8k，所以，所有大于8k都会报错，并提示你下载file-loader，小于8k的文件会转为base64位的字符串编码进行展示，且同时
在这里插入图片描述
dist中出现了图片文件，这里的路径会存在问题，使其无法显示在output中加入

publicPath:‘dist/’

就会看见图片路径正常，且显示正常

如果我们需要对文件的路径及其文件名进行修改的话只需要在url-loader规则的options选择中加入

name:“img/[name].[hash].[ext]”

这里的img/指的是将文件加入到img文件夹中，没有自动生成
[name]是指当前的文件的名字，系统会去找到你要加载的图片名称，代表系统的变量
[hash:8]是指的hash值，为了使其不重复，：8是指只需要8位数
[ext]在这里是指后缀名的意思，系统变量会自动查找到文件名的后缀添加上去

接下来讲关于es6转es5的方法，目的是为了兼容低版本的浏览器
加载好的bundle.js文件中
在这里插入图片描述

存在es6语法需要转换为es5

1.第一种npm install babel-loader babel-core babel-preset-env webpack
2.第二种npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
3.第三种npm install -D babel-loader@7 babel-core babel-preset-es2015

一共三方式无非就是需要下载babel-loader babel-core babel-preset-env 这三个模块

因为我们是安装过webpack的，所以是不需要webpack，然后看下载的东西
这种babel-loader是直接去下载最新版本，加了@是去指定下载那个版本，而我测试后发现官网的是还是不用了，因为我直接babel-core会指定6的版本，而babel-loader是8的版本，所以必须将babel-loader版本下调到7才可以

接下来就是webpack.config.js的配置了，还是一样在module中添加规则

{
				test: /\.js$/,
				exclude: /(node_modules|bower_components)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['babel-preset-es2015']
					}
				}
			}