webpack学习笔记（踩坑）

最新推荐文章于 2024-07-28 00:56:04 发布
最新推荐文章于 2024-07-28 00:56:04 发布
阅读量859 收藏 2
点赞数 1
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41910848/article/details/82555613
版权

一、什么是webpack

是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

二、安装和命令行 

Webpack可以使用npm安装，新建一个空的练习文件夹，在终端中转到该文件夹后执行下述指令就可以完成安装。

我这里用的vscode，可以直接进入该目录下，若是在终端可以使用cd进入目录

前期准备工作：

  1. 在里面创建两个文件夹,src文件夹和public文件夹，src文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来我们再创建三个文件:
  • index.html --放在public文件夹中;
  • Greeter.js-- 放在src文件夹中;
  • main.js-- 放在src文件夹中;

1.初始化

npm init

2.安装webpack

先全局安装webpack和webpack-cli
npm install webpack -g
npm install webpack-cli -g
再局部安装webpack和webpack-cli
npm install webpack --save-dev
npm install webpack-cli --save-dev

我在后面继续安装的时候报错，后来发现这里需要这样安装

3.处理js文件（坑多）

在项目根目录下，新建main.js，然后打包

webpack  main.js  bundle.js

其中main.js是scr目录下的  bundle.js是自动生成的 

这个原因就是上面的若不是按照那个顺序，就会出错，可能是我少了一步吧。。。。

修改之后继续。。执行webpack  main.js  bundle.js，报错。。。

示没有配置webpack的mode选项，默认有production和development两种，我们输入

依然有错：未找到入口模块发成错误，

这是因为webpack4.x是以项目根目录下的./src/index.js作为入口，所以我们要新建src目录且改main.js为index.js，成功

每次这样写有点麻烦，我们可以在package.json中

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development"
  },

必须是双引号

 当前目录结构：

 二.css练习

新建一个css文件style.css，在index.js中引入

const greeter = require('./Greeter.js');
require('./style.css');
document.querySelector("#root").appendChild(greeter());

webpack不支持css文件类型，需要依赖loader

npm install css-loader style-loader

css-loader：使webpack可以处理css文件

style-loader：新建一个style标签，把css-loader处理过的文件放进去，然后插入到HTML标签中

安装之后使用：

webpack  --mode development --module-build 'css=style-loader!css-loader'   //给css绑定

三.webpack的配置

1.新建一个文件webpack.config.js（默认名），是在使用webpack时默认的配单文件

(1).单文件输入：

const path = require('path');
 
module.exports = {
	entry: './src/js/Greeter.js',                                // 入口文件
	output: {                                                 // 出口文件
		path: path.resolve(__dirname, 'dist/js'),         // 出口文件位置，一定要是绝对路径
		filename: 'bundle.js'                             // 出口文件名
	}
}

上面：将会打包Greeter.js文件到bundle.js文件 

(2)多文件输入：

const path = require('path');
 
module.exports = {
	entry: {
		main: './src/main.js',   // 入口文件
		a: './src/a.js'
	},
	output: {            // 出口文件          
		path: path.resolve(__dirname, 'dist/js'),         // 出口文件位置
		filename: '[name].js'      // 出口文件名，name就是entry的键名
	}
}

2.自动生成HTML页面文件

(1) 安装插件

npm install html-webpack-plugin --save-dev

(2) 引用插件

const path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
	entry: {
		main: './src/Greeter.js',   // 入口文件
	},
	output: {            // 出口文件          
		path: path.resolve(__dirname, 'dist'),         // 出口文件位置
		filename: 'js/bundle.js'      // 出口文件名
	},
	plugins: [
		new htmlWebpackPlugin({
			filename: 'index.html',         // 生成的HTML名，路径为上面output中的path
			template: './index.html',               // 会与根目录下的index.html相关联，把根目录下index的东西都放到生成的HTML中
			inject: 'head'                          // 打包后的script放到head中
		})
	]
}

（3）传参使用

1.参数

	plugins: [
		new htmlWebpackPlugin({
			filename: 'index.html',         // 生成的HTML名，路径为上面output中的path
			template: './index.html',    // 会与根目录下的index.html相关联，把根目录下index的东西都放到生成的HTML中
            inject: 'head' ,                      // 打包后的script放到head中
            title:'you are welcome'
		})
	]

在根目录下的index.html中

     <div id='root'>
        <span><%= htmlWebpackPlugin.options.title %></span>
    </div>

生成的dist/index.html中

   <div id='root'>
        <span>you are welcome</span>
    </div>

2、上线地址

	output: {            // 出口文件          
		path: path.resolve(__dirname, 'dist'),         // 出口文件位置
        filename: 'bundle.js' ,     // 出口文件名
        publicPath:'http://llh.com' //上线的地址
	},

生成的index.html中

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack</title>
  <script type="text/javascript" src="http://llh.com/bundle.js"></script></head>
  <body>
    <div id='root'>
        <span>you are welcome</span>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

3、html压缩

            inject: 'head' ,                      // 打包后的script放到head中
            title:'you are welcome',
            minify:{
                removeComments: true,        // 去掉注释
                collapseWhitespace: true     // 去掉空格

4、多页面应用，生成多个html文件

	plugins: [
		new htmlWebpackPlugin({
			filename: 'index.html',         // 生成的HTML名，路径为上面output中的path
			template: './index.html',      // 会与根目录下的index.html相关联，把根目录下index的东西都放到生成的HTML中
            inject: 'head' ,                      // 打包后的script放到head中
            title:'you are welcome',
            chunks: ['Greeter']
        }),
        new htmlWebpackPlugin({
             filename: 'main.html',         // 生成的HTML名，路径为上面output中的path
			template: './index.html',    // 会与根目录下的index.html相关联，把根目录下index的东西都放到生成的HTML中
            inject: 'head' ,                      // 打包后的script放到head中
            title:'hello world',
            chunks: ['Greeter']    // 会引入greeter.js
        })
        
	]

五、loader的配置

1、解析es6语法

（1）安装babel

Babel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：

  • 让你能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器完全支持；
  • 让你能使用基于JavaScript进行了拓展的语言，比如React的JSX；
 npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

在webpack中配置Babel的方法如下:

   module: {
        rules: [
    {
    test: /\.js$/,               // 匹配js文件
    loader: 'babel-loader',
    exclude: path.resolve(__dirname, 'node_modules'),    // 匹配时忽略这个目录，提高打包速度
    include: path.resolve(__dirname, 'src'),             // 匹配时查找的范围
    query: {
    presets: ['env']
    } 
    }
    ]
    
}

此处有坑。。。。。

在配置webpack.config.js自动打包的时候,出现Error: Cannot find module '@babel/core'错误
最初以为是babel-core没有安装上。重装了好几遍babel-core还是不行。对照以前的项目,发现babel-loader的版本不一样,之前的是@7.1.5版本,而现在是@8.0.0版本。

解决方法：

npm uninstall babel-loader

npm install babel-loader@7.1.5

再npm run dev 成功了。。。。。

2、解析css

（1）安装style-loader和css-loader

css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

npm install --save-dev style-loader css-loader

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

（3）在项目中经常有类似-webkit的前缀，每次写很麻烦，这里就要用到postcss-loader,后处理loader

  npm install postcss-loader autoprefixer --save-dev           // autoprefixer是自动补全

配置webpack

{
	test: /\.css$/,
	use: [
		'style-loader',                                                // 注意顺序
		{ loader: 'css-loader', options: { importLoaders: 1 } },       // 在css中使用@import引入其他文件时，
		'postcss-loader'                                               // 不加importLoaders，postcss-loader不会操作引入的文件
	]
}

新建一个postcss.config.js文件和webpack.config.js同级

module.exports = {
	plugins: [
		require('autoprefixer')
	]
}

此时，如果你打包，并不会报错，但是前缀可能也没有，所以需要在package.json中加入

"browserslist": [
    "> 1%",                                // 全球浏览器使用率大于1%，最新两个版本并且是IE8以上的浏览器，加前缀
    "last 2 versions",
    "not ie <= 8"
  ]

3、解析CSS预处理器

Sass 和 Less 之类的预处理器是对原生CSS的拓展，它们允许你使用类似于variables, nesting, mixins, inheritance等不存在于CSS中的特性来写CSS，CSS预处理器可以这些特殊类型的语句转化为浏览器可识别的CSS语句，

你现在可能都已经熟悉了，在webpack里使用相关loaders进行配置就可以使用了，以下是常用的CSS 处理loaders:

Less Loader

Sass Loader

Stylus Loader

（1）解析less

npm install less less-loader --save-dev

webpack的配置

{
	test: /\.less$/,
	loader: 'style-loader!css-loader!postcss-loader!less-loader'     // 不用加importLoader，less-loader默认会有
}

（2）解析sass

npm install html-loader --save-dev

webpack的配置

{
	test: /\.html$/,
	loader: 'html-loader'
}

4.使用url-loader处理图片（会影响文件大小）

npm install url-loader --save-dev

webpack配置

{
	test: /\.(png|jpg|gif|svg)$/i,
	loader: 'url-loader',
	query: {
		limit: 30000,                     // 当图片小于30kb的时候，图片变为base64位，不打包
		name: 'assets/[name]-[hash:5].[ext]'
	}
}

5、通过image-webpack-loader和url-loader结合：先有image-webpack-loader打包，在通过url-loader

npm install image-webpack-loader --save-dev

{
	test: /\.(png|jpg|gif|svg)$/i,
	loaders: [
		'url-loader?limit=1000&name=assets/[name]-[hash:5].[ext]',
		'image-webpack-loader'
	]
}

最后  贴上webpack全部代码：

const path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
	entry: {
		main: './src/Greeter.js',   // 入口文件
	},
	output: {            // 出口文件          
		path: path.resolve(__dirname, 'dist'),         // 出口文件位置
        filename: 'bundle.js' ,     // 出口文件名
        publicPath:'http://llh.com' //上线的地址
	},
	plugins: [
		new htmlWebpackPlugin({
			filename: 'index.html',         // 生成的HTML名，路径为上面output中的path
			template: './index.html',               // 会与根目录下的index.html相关联，把根目录下index的东西都放到生成的HTML中
            inject: 'head' ,                      // 打包后的script放到head中
            title:'you are welcome',
            chunks: ['Greeter'],
            minify:{
                removeComments: true,        // 去掉注释
                collapseWhitespace: true     // 去掉空格

            }
        }),
        new htmlWebpackPlugin({
            filename: 'main.html',
            template: './index.html',
            title: 'hello world',
            chunks: ['Greeter']     // 会引入main.js和a.js
        })
        
    ],
    module: {
        rules: [
    {
    test: /\.js$/,               // 匹配js文件
    loader: 'babel-loader',
    exclude: path.resolve(__dirname, 'node_modules'),    // 匹配时忽略这个目录，提高打包速度
    include: path.resolve(__dirname, 'src'),             // 匹配时查找的范围
    query: {
    presets: ['env']
        } 
     },
     {
        test: /\.css$/,
        use: [
            {
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }
        ]
    },
    {
        test: /\.css$/,
        use: [
            'style-loader',                                                // 注意顺序
            { loader: 'css-loader', options: { importLoaders: 1 } },       // 在css中使用@import引入其他文件时，
            'postcss-loader'                                               // 不加importLoaders，postcss-loader不会操作引入的文件
        ]
    },
    {
        test: /\.less$/,
        loader: 'style-loader!css-loader!postcss-loader!less-loader'     // 不用加importLoader，less-loader默认会有
    },
    
    {
        test: /\.html$/,
        loader: 'html-loader'
    },
    {
        test: /\.(png|jpg|gif|svg)$/i,
        loader: 'url-loader',
        query: {
            limit: 30000,                     // 当图片小于30kb的时候，图片变为base64位，不打包
            name: 'assets/[name]-[hash:5].[ext]'
        }
    },
    {
        test: /\.(png|jpg|gif|svg)$/i,
        loaders: [
            'url-loader?limit=1000&name=assets/[name]-[hash:5].[ext]',
            'image-webpack-loader'
        ]
    }
    ]
  }
}

参考：

webpack4.x深入与实践

入门 Webpack，看这篇就够了

 

 

Muzilh
关注
专栏目录
React Native学习资源汇总
xiangzhihong8的专栏
08-01 2292
目前主流的移动跨平台技术方案大体可以分为三类，一类是使用原生内置浏览器加载HTML5的Hybrid技术方案，采用此种方案的主要有Cordova、Ionic和微信小程序；另一类是使用JavaScript语言进行开发，然后使用原生组件进行渲染，采用此方案的主要有React Native、Weex和快应用；最后一类是使用自带的渲染引擎和自带的原生组件来实现跨平台，采用此种方案的主要是Flutter。 对于其他的浏览器方案，基本可以抛弃了，现在我们讨论移动跨平台开发主要说的是React Native和Flutter
安装和配置webpack
weixin_43713835的博客
11-29 188
1.安装webpack：npm install webpack webpack-cli -D 2.创建一个 **webpack.config.js 并进行配置 module.exports = { mode:"development"//可以设置为development(开发模式)，production(发布模式) } 3.修改项目中的package.json文件添加运行脚本dev “s...
webpack
weixin_30457465的博客
09-25 52
webpack是一个js应用程序的静态模块打包器，主要偏向于模块化 从webpack4.0.0开始，可以不用引入配置文件，不过，webpack依然是高度可配置的 webpack有是个核心概念： 1）入口（entry） 2）出口（output）3）loader 4）插件（plugins） 入口（entry）: 指定一些模块作为webp...
Webpack--入门只看这一篇就够了(图文＋代码）
最新发布
weixin_46714216的博客
07-28 3974
代码分离（code splitting）和懒加载（lazy loading）是Webpack中用于优化资源加载的两种技术。代码分离是将打包生成的代码文件拆分成多个较小的文件，而不是将所有代码打包到一个文件中。这样做的好处是可以提高初始加载速度，并减小每个页面的加载所需的数据量。通过代码分离，只需在需要时加载特定模块，提高了页面的响应速度和用户体验。懒加载是指在需要时才加载某个模块，而不是在初始加载时就将所有代码一次性加载完毕。通过懒加载，可以将页面分成多个模块，并根据需要动态地加载模块。
craco + webpack 4 升 5
harrry的博客
12-04 1183
craco 升级 webpack 5 踩坑
Vue快速入门学习笔记(更新ing)
喜欢前端的后端 MelodyJerry
11-15 4184
原在博客园发布，先同步到CSDN：https://www.cnblogs.com/melodyjerry/p/13768594.html 本笔记综合了视频狂神说的Vue快速上手和菜鸟教程、CSDN等博客文章，以及个人的一些学习见解与体会。 由于是为了团队需要而快速入门，HTML、CSS、JS、Vue等基础均不全，故本笔记仅供参考学习使用。 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios.
前端学习笔记
e1592027130的博客
10-19 1194
笔记 小知识 V-ON绑定事件 V-BIND绑定属性 Network中可以查看当前发起的请求 XHR这个标签出现在Chrome浏览器的开发者工具Network选项卡中 XHR类型即通过XMLHttpRequest方法发送的请求即AJAX请求 外部JS引入当前Vue实例 函数中传this指向就好了 forEach没有返回值要有返回值的话用map git checkout -b dev origin/dev 建立分支并且从远程拉取 APP的组件生命周期与小程序有出入 scroll view 有滑动时间并把sc
React Native学习指南
xiangzhihong8的专栏
11-05 2764
本篇汇集了React从入门到精通的各种技术，是你学习RN的指南 。本指南汇集React-Native各类学习资源，给大家提供便利。指南正在不断的更新，大家有好的资源欢迎Pull Requests！同时还有Awesome React Native系列 https://github.com/jondot/awesome-react-native目录教程React NativeReact.jsES6系列
webpack3升级到webpack4踩坑经历与解决方案
本文讲述了作者从webpack3升级到webpack4的踩坑经历，涉及到webpack-cli的安装、依赖项的调整、错误解决等多个方面，旨在为读者提供一个详细的升级指南。 一、webpack-cli的安装 在升级到webpack4之前，需要先安装...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值