盘点Webpack常见使用配置

随着前端开发越来越复杂,那么我们需要做的功能也不止基本界面了,

  • 比如开发过程中我们需要通过模块化的方式来开发;
  • 比如也会使用一些高级的特性来加快我们的开发效率或者安全性,比如通过ES6+、TypeScript开发脚本逻辑,通过sass、less等方式来编写css样式代码;
  • 比如开发过程中,我们还希望实时的监听文件的变化来并且反映到浏览器上,提高开发的效率;
  • 比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化;
  • 等等….
    即使我们使用三大框架 或者借助于脚手架cli 事实上Vue-CLI、create-react-app、Angular-CLI都是基于webpack来帮助我们支持模块化、less、TypeScript、打包优化等的;

1. 简介

我们先来看一下官方的解释:
webpack is a static module bundler for modern JavaScript applications.
webpack是一个静态的模块化打包工具,为现代的JavaScript应用程序;
我们来拆分一下官方解释:

盘点Webpack常见使用配置_第1张图片
刚进入webpack我们就可以清楚的看到下面这个图,可想而知webpack 的重要性以及功能的强大

盘点Webpack常见使用配置_第2张图片

2. 上手准备

**

  1. webpack的官方文档是https://webpack.js.org/
  2. webpack的中文官方文档是https://webpack.docschina.org/
  3. DOCUMENTATION:文档详情,也是我们最关注的
  4. Webpack的运行是依赖Node环境的,所以我们电脑上必须有Node环境 p所以我们需要先安装
  5. Node.js,并且同时会安装npm; p我当前电脑上的node版本是v14.15.5,npm版本是6.14.11(你也可以使用nvm或者n来管理Node版本);
  6. Node官方网站:https://nodejs.org/**

3. 安装

webpack的安装目前分为两个:webpack、webpack-cli
执行webpack命令,会执行node_modules下的.bin目录下的webpack;
webpack在执行时是依赖webpack-cli的,如果没有安装就会报错;
而webpack-cli中代码执行时,才是真正利用webpack进行编译和打包的过程;
所以在安装webpack时,我们需要同时安装webpack-cli(第三方的脚手架事实上是没有使用webpack-cli的,而是类似于自
己的vue-service-cli的东西)

npm install webpack webpack-cli –g # 全局安装
npm install webpack webpack-cli –D # 局部安装

注意如果我们创建好项目,配置好package.json 想要直接使用npm run build,我们需要在创建我们的src文件夹,并且文件夹下面必须有index.js,自从 v4.0.0 版本开始,webpack 不再需要配置文件”。没有配置文件,webpack 仅在存在 scr/index.js 文件时才有效。这个信息(使用粗体)在文档中明确标明。

创建局部webpack
第一步:创建package.json文件,用于管理项目的信息、库依赖等
第二步:安装局部的webpack
第三步:使用局部的webpack
第四步:在package.json中创建scripts脚本,执行脚本打包即可
创建局部的webpack

npm init
npm install webpack webpack-cli -D
npx webpack

或者配置package.json文件

npm run build

盘点Webpack常见使用配置_第3张图片

我们可以在根目录下创建一个webpack.config.js文件,来作为webpack的配置文件:
盘点Webpack常见使用配置_第4张图片
继续执行webpack命令,依然可以正常打包
盘点Webpack常见使用配置_第5张图片
之后我们执行 npm run build来打包即可

指定配置文件
我们将webpack.config.js修改成了 wk.config.js,这个时候我们可以通过 --config 来指定对应的配置文件;
盘点Webpack常见使用配置_第6张图片

3. 编写案列

当我们想使用css的时候
盘点Webpack常见使用配置_第7张图片
上面的错误信息告诉我们需要一个loader来加载这个css文件,但是loader是什么呢?

loader 可以用于对模块的源代码进行转换;
我们可以将css文件也看成是一个模块,我们是通过import来加载这个模块的;
在加载这个模块时,webpack其实并不知道如何对其进行加载,我们必须制定对应的loader来完成这个功能;

css-loader使用

npm install css-loader -D

使用方案
内联方式:内联方式使用较少,因为不方便管理; p在引入的样式前加上使用的loader,并且使用!分割;
在这里插入图片描述
loader配置方式
module.rules的配置如下:
盘点Webpack常见使用配置_第8张图片

  • rules属性对应的值是一个数组:[Rule] 数组中存放的是一个个的Rule,Rule是一个对象,对象中可以设置多个属性:
    1. test属性:用于对 resource(资源)进行匹配的,通常会设置成正则表达式;
    2. use属性:对应的值时一个数组:[UseEntry]
    3. UseEntry是一个对象,可以通过对象的属性来设置一些其他属性
      loader:必须有一个 loader属性,对应的值是一个字符串;
      options:可选的属性,值是一个字符串或者对象,值会被传入到loader中;
      query:目前已经使用options来替代;
  1. 传递字符串(如:use: [ ‘style-loader’ ])是 loader 属性的简写方式(如:use: [ { loader:
    ‘style-loader’} ]);
  • loader属性: Rule.use: [ { loader } ] 的简写

可以通过css-loader来加载css文件但是中并没有生效(页面没有效果)。我们还需要style-loader 将.css文件进行解析,完成插入style的操作

npm install style-loader -D

配置style-loader

loader的执行顺序是从右向左(或者说从下到上,或者说从后到前的),所以我们需要将styleloader写到css-loader的前面;
盘点Webpack常见使用配置_第9张图片
如何处理less文件
使用less工具来完成它的编译转换:

npm install less -D

less-loader处理

npm install less-loader -D
 module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    }

postcss-loader安装

  1. 什么是PostCSS呢?
    PostCSS是一个通过JavaScript来转换样式的工具;
    这个工具可以帮助我们进行一些CSS的转换和适配,比如自动添加浏览器前缀、css样式的重置;
    但是实现这些功能,我们需要借助于PostCSS对应的插件;
  2. 如何使用PostCSS呢?主要就是两个步骤:
    第一步:查找PostCSS在构建工具中的扩展,比如webpack中的postcss-loader;
    第二步:选择可以添加你需要的PostCSS相关的插件;
npm install postcss postcss-cli -D
npm install autoprefixer -D

真实开发中我们必然不会直接使用命令行工具来对css进行处理,而是可以借助于构建工具:
在webpack中使用postcss就是使用postcss-loader来处理的;

npm install postcss-loader -D

我们修改加载css的loader:(配置文件已经过多,给出一部分了)

在根目录下创建postcss.config.js
盘点Webpack常见使用配置_第10张图片

你可能感兴趣的:(webpack,javascript,前端)