webpack4.x最详细入门讲解

webpack4.x最详细入门讲解

前言

1.1 什么是webpack?

我们在index.html中写下html代码,它的作用是为了引入我们打包后的js文件:

可以看出webpack同时编译了index.js和hello.js,现在打开index.html,可以看到如下结果:

没错,我们已经成功使用webpack进行打包,原来webpack也不过如此嘛!但是,每次都在终端中输入这么长的命令,感觉好烦啊,还好有懒人方法,让我们看看。

搞定,是不是这样更方便了,感觉没那么low了,但还能不能更便捷智能呢?那必须的!

OK,搞定,是不是很简单,但webpack的功能远不止于此,下面我们继续。

如果我们的代码有bug,在浏览器的调试工具中会提示错误出现的位置,这就是devtool: 'source-map'配置项的作用。

还有诸如图片loader、字体loader等就不一一列出来了,感兴趣的可前往webpack官网查看,都是一样的套路。

这是因为官方默认babel-loader | babel对应的版本需要一致: 即babel-loader需要搭配最新版本babel,详细可参考这篇博客。

到这里了是不是感觉很爽,不就是配置嘛,想要使用什么就配置什么。

// webpack.config.jsconst path = require('path');module.exports = { entry: path.join(__dirname, "/src/index.js"), // 入口文件 output: { path: path.join( __dirname, "/dist"), //打包后的文件存放的地方 filename: "bundle.js" //打包后输出文件的文件名 }, devServer: { contentBase: "./dist", // 本地服务器所加载文件的目录 port: "8088", // 设置端口号为8088 inline: true, // 文件修改后实时刷新 historyApiFallback: true, //不跳转 }, devtool: 'source-map', // 会生成对于调试的完整的.map文件,但同时也会减慢打包速度 module: { rules: [ { test: /.css$/, // 正则匹配以.css结尾的文件 use: ['style-loader', 'css-loader'] // 需要用的loader,一定是这个顺序,因为调用loader是从右往左编译的 }, { test: /.(scss|sass)$/, // 正则匹配以.scss和.sass结尾的文件 use: ['style-loader', 'css-loader', 'sass-loader'] // 需要用的loader,一定是这个顺序,因为调用loader是从右往左编译的 }, { // jsx配置 test: /(.jsx|.js)$/, use: { // 注意use选择如果有多项配置,可写成这种对象形式 loader: "babel-loader" }, exclude: /node_modules/ // 排除匹配node_modules模块 } ] }}// .babelrc 使用时把注释删掉,该文件不能添加注释{ "presets": ["env", "react"]}

6.2 自动生成html文件(HtmlWebpackPlugin)

为什么会自动生成dist文件夹呢?因为我们在output出口配置项中定义了出口文件所在的位置为dist文件夹,且出口文件名为bundle.js,所以HtmlWebpackPlugin会自动帮你在index.html中引用名为bundle.js文件,如果你在webpack.config.js文件中更改了出口文件名,index.html中也会自动更改该文件名,这样以后修改起来是不是方便多了?

4. 设置package.json的scripts命令:

7.3 增加css前缀、分离css、消除冗余css、分离图片

2.分离css

但是背景图片变成了base64,因为webpack会自动优化图片,减少发送请求,但是如果我想把它变成路径的该怎么做?

问题就出在路径上,我们之前图片的路径是在../images文件夹下,但是打包出来后没有这个路径了,图片直接和文件同级了,所以我们需要在webpack.common.js中给它设置一个文件夹:

这又涉及到配置路径的问题上了,我们还需要在css-loader中给背景图片设置一个公共路径publicPath: '../',如下:

是不是很热闹?到现在我们不知不觉中也同时解决了图片分离的问题,偷偷高兴一下吧!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181029A0M9UY00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券