webpack4实践指南(一)

创建一个webpack项目需要做的基本 *** 作：

为了能在浏览器看见项目的启动效果，我们需要展示的页面，按webpack官网教程手动创建必要的文件：

注意：

此时，就可以直接在编辑器打开网页，在浏览器中看见的效果图：

考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便，我们可以设置一个快捷方式，在packagejson中添加一个npm脚本：

在终端运行下面命令中任意一个都可以：

现在从编辑器直接打开页面，就可以看见相应的页面：

在webpack中使用webpack-dev-server，首先安装：

在packagejson中添加：

webpack-dev-server提供了一个简单的web服务器，并且能够实时重新加载，但我们需要为它做一些配置，以便于告诉服务器，在哪里查找文件。

新建webpackconfigjs文件，首先做基础配置：

然后为webpack-dev-server配置访问文件的入口：

以上配置告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。

然后我们运行脚本，在浏览器看一下启动效果：

此时又出现了新的问题，在web服务器上访问的文件只有dist，我们要如何才能看见像之前一样的页面呢？

在webpackconfigjs文件下添加配置：

然后npm run start在浏览器打开的效果：

现在基本上已经达到了最基础的效果，如果想要扩展成为一个配置完整的webpack项目，还需要继续深入学习。

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

webpackconfigjs里配置

webpackconfigjs里配置

webpack loader 将所有类型的文件，转换为应用程序的依赖图可以直接引用的模块

通过require()将想要使用的插件添加到plugins数组中,多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new *** 作符来创建它的一个实例。

npm init -y

安装webpack

npm i webpack_dome webpack-cli -D

在根目录下新建src文件夹,在src里新建indexjs文件

indexjs文件

创建并配置webpackconfigjs文件

webpackconfigjs文件

配置 packagejson 文件，在scripts中添加'build'使得运行 npm run build 可以直接执行 webpack 命令,在根目录内会生成dist文件夹,里面是对应生成的文件,

安装 npm install --save-dev express webpack-dev-middleware ,添加'start'使得运行 npm run start 可以直接执行 webpack-dev-server 命令,

packagejson 文件

再次打包时需要删除旧文件

执行 npm install clean-webpack-plugin --save-dev 命令，安装依赖。

修改webpackconfigjs文件配置

新建indexhtml文件,并手动引入打包后的js文件

执行 npm i html-webpack-plugin --save-dev 命令，安装依赖。

新建indexejs文件

修改webpackconfigjs文件配置

重新运行 npm run build，生成新的 dist 包，包内会生成一个新的 indexhtml 文件，并自动引入了 indexminjs 文件。

执行 npm i open-browser-webpack-plugin webpack-dev-server --save-dev 命令，安装依赖。

修改 webpackconfigjs 配置

修改webpackconfigjs文件配置

webpack打包的时候只认识 js 文件，但我们开发中肯定不仅仅只是js文件，如 html 、 css 、 jpg 等，webpack提供了很多 loader 来打包不同类型的文件。

对于加载css文件来说，我们需要一个可以读取css文件的loader，这个loader最常用的是 css-loader 。

webpackconfigjs

css-loader 只是负责将css文件进行解析，并不会将解析之后的css插入到页面中，如果我们希望再完成插入style的 *** 作，那么我们还需要另外一个loader，就是 style-loader 。

注意： 因为loader的执行顺序是从右向左（或者说从下到上，或者说从后到前的），所以我们需要将styleloader写到css-loader的前面。

其实 style-loader 做的事情很简单，就是在动态创建了一个 style 标签，把 css-loader 处理的css内容放到style标签内，然后在插入到页面的 head 标签内。

安装less工具将less文件转为css文件。

使用 less-loader ，来自动使用less工具转换less到css

安装

使用

在 这里 可以查询浏览器的占有率。

Browserslist 是一个在不同的前端工具之间，共享目标浏览器和Nodejs版本的配置

方案一：在 packagejson 中配置：

方案二：在根目录新建 browserslistrc 文件

方案一和方案二配置的条件都是 or 关系， 如果要同时满足条件用 and

PostCSS 是一个通过JavaScript来转换样式的工具，这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置，但是实现这些工具，我们需要借助于PostCSS对应的插件。

可以在 这里 查询到css样式添加规则。

因为我们需要添加前缀，所以要安装autoprefixer：

命令行直接使用使用postcss工具，并且制定使用autoprefixer：

在webpack中使用postcss就是使用 postcss-loader 来处理的。

安装

配置

第一种方案：

webpackconfigjs

第二种：

也可以将plugin封装出来，在根目录新建 postcssconfigjs 文件：

webpackconfigjs

事实上，在配置postcss-loader时，我们配置插件并不需要使用autoprefixe，我们可以使用另外一个插件： postcss-preset-env 。

postcss-preset-env也是一个postcss的插件，它可以帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境添加所需的polyfill，也包括会自动帮助我们添加autoprefixer（所以相当于已经内置了autoprefixer）。

安装 ：

使用

将 autoprefixer 替换成 postcss-preset-env 就行了：

有些插件直接写字符串就行，会自动requre：

问题复现：

假如 mainjs 里面引入了 src/indexcss ，而 src/indexcss 里使用 @import 引入了 src/testcss ，就会出现 src/testcss 文件里的样式不会被 postcss 所处理，这时候就需要配置：

webpackconfigjs

要处理jpg、png等格式的，我们也需要有对应的loader： file-loader

安装

配置

webpackconfigjs

资源加载方式：

有时候我们处理后的文件名称按照一定的规则进行显示，比如保留原来的文件名、扩展名，同时为了防止重复，包含一个hash值等。这个时候我们可以使用 PlaceHolders 来完成，webpack给我们提供了大量的PlaceHolders来显示不同的内容。

介绍几个最常用的placeholder：

自定义打包名字和输出路径：

webpackconfigjs

url-loade r和file-loader的工作方式是相似的，但是可以将较小的文件，转成base64的URI。

安装

配置

和file-loader用法很相似

在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader，在webpack5之后，我们可以直接使用 资源模块类型（asset module type） ，来替代上面的这些loader。

注意： asset module type 打包的资源如果用require不需要 detault

asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。

自定义输出文件和文件名

webpack5 的[ext]已经包含了

第一种写法：

这种写法包含所有的assetModule的定义，不推荐。

webpackconfigjs

第二种写法：

webpackconfigjs

asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。

webpackconfigjs

asset 可以实现url-loader的limit效果。

我们可以选择使用file-loader来处理，也可以选择直接使用webpack5的资源模块类型来处理。

Warning: It looks like you’re using a minified copy of the development build of React When deploying React apps to production, make sure to use the production build which skips development warnings and is faster See >

以上就是关于webpack4实践指南(一)全部的内容，包括:webpack4实践指南(一)、webpack打包原理、二、webpack的loader配置等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！