Webpack 4 学习总结

栏目: CSS · 发布时间: 5年前

内容简介：一起安装

一、安装配置

【前提】安装 node.js 环境
【官网下载】 https://nodejs.org/zh-cn/

安装教程不赘述
创建项目文件夹
例如创建如下文件夹 webpack_demo1
创建配置项
```
npm init -y
```
生成一个 package.json 文件如下图
全局安装 webpack （不推荐，进行下一步操作）
```
npm install webpack -g
```

局部安装 webpack (推荐)

npm install webpack --save-dev

另外， webpack 4 要求安装包

npm install webpack-cli --save-dev

一起安装

npm install webpack webpack-cli --save-dev

以下表示安装成功

Webpack 4 学习总结

创建入口文件
```
./src/index.js
```
任意编写 index.js 文件内容用于测试

配置生产和开发模式

打开 package.json 文件添加如下脚本

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

Webpack 4 学习总结

现在运行：
```
npm run dev
```
生成 dist/main.js ，其中 main.js 没有压缩

npm run dev 表示 开发模式
```
npm run build
```
此时的 main.js 被压缩，这便是 生产模式

接下来看看打包的js文件是否能够使用

创建 index.html 引入打包好的 main.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./main.js" charset="utf-8"></script>
</head>
<body>

</body>
</html>

Webpack 4 学习总结

打开浏览器调试

输出结果表示打包成功，大功告成！！！

二、使用配置文件进行打包

上一讲中我们打包没有用到 webpack.config.js 配置文件，webpack4把自己定位为一个零配置的工具。这一讲学习配置文件使用，更好地学习webpack。

根目录下新建一个 webpack.config.js 文件（记载配置信息）

配置文件

const path = require('path');

 module.exports = {
   entry:'./public/index.js',
   output:{
     path:path.resolve(__dirname,'build'),
     filename:'bundle.js'
   }
 }

字段	意义
entry	入口，所需打包的文件的路径
output	出口
path	文件打包后存放的路径
path.solve()	将路径或者路径片段的序列处理成绝对路径
_dirname	表示当前文件所在目录的绝对路径
filename	打包后文件的名称

按照配置项新建一个入口文件 public/index.js
运行 npm run dev

三、配置入口和出口的进阶使用

一、单出口形式

webpack.config.js

const path = require('path');


module.exports = {
  //单出口形式
  entry:['./public/index.js','./public/index2.js'],//有多个文件
  output:{
    path:path.resolve(__dirname,'build'),
    filename:'bundle.js'
  }
}

Webpack 4 学习总结

运行 npm run dev

生成唯一的打包文件 bundle.js

二、多出口形式

webpack.config.js`

const path = require('path');

module.exports = {
  //多出口形式
  entry:{
    entryOne:'./public/entryOne/index.js',
    entryTwo:'./public/entryTwo/index.js',
  },
  output:{
    path:path.resolve(__dirname,'build'),
    filename:'[name].js'
  }
}

文件结构
运行 npm run dev
- 生成两个打包文件

四、配置webpack-dev-server

一、了解 webpack-dev-server

webpack-dev-server
webpack

二、安装webpack-dev-server

npm install --save-dev webpack-dev-server

三、配置webpack.config.js文件

devServer:{
        contentBase:'./dist',  //设置服务器访问的基本目录
        host:'localhost', //服务器的ip地址
        port:8080,  //端口
        open:true  //自动打开页面
}

四、配置package.json

"scripts": {
    "start": "webpack-dev-server --mode development"
 }

五、运行命令

npm run dev 打包文件

npm run start 打开服务器

五、打包css

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

配置loader

在 webpack.config.js 文件里配置module中的rules，如下：

test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader。

module.exports = {
    /*入口和出口文件可以不用配置，默认*/

    module:{
      rules:[
        {
          test:/\.css$/,
          use:['style-loader','css-loader']//引入的顺序至关重要,不可改变
        }
      ]
    }
}

测试是否打包成功
- 在 src 下创建 index.css 文件
- 在 index.js 中引入 index.css
  文件
  
  require('!style-loader!css-loader!./index.css');
- 进行打包后运行 npm run dev （之前配置好，详见第一篇文章：webpack4 基础配置）
  红色的背景，控制台输出 hello

------------

六、使用babel编译ES6

babel转化语法所需依赖项：
- babel-loader ：负责 es6 语法转化
- babel-core ： babel 核心包
- babel-preset-env ：告诉 babel 使用哪种转码规则进行文件处理

安装依赖

npm install babel-loader @babel/core @babel/preset-env --save-dev

配置 webpack.config.js 文件

{
      test:/\.js$/,
      exclude:/node_modules/,
      use:'babel-loader'
    }

新建 .babelrc 文件配置转换规则
```
{
  "presets":["@babel/preset-env"]
}
```

或者直接在 webpack.config.js 文件中配置规则

{
      test:/\.js$/,
      exclude:/node_modules/,
      use:{
          loader:'babel-loader',
          options:{
            presets:['@babel/preset-env']
          }
      }
    }

七、提取分离打包css

前面讲过将css文件引入到js文件中，然后一起打包成js文件，现在我们学习单独提取分离css并且打包。

安装插件 min-css-extract-plugin

npm install mini-css-extract-plugin --save-dev

配置 webpack.config.js

引入插件

const MiniCssPlugin = require("mini-css-extract-plugin");

rules 设置

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

plugins 设置

new MiniCssPlugin({
    filename:'./css/[name].css'
  })

截图

Webpack 4 学习总结

运行命令打包

八、压缩优化css

压缩css,去除注释

安装插件

npm install --save-dev optimize-css-assets-webpack-plugin

配置 webpack.config.js

头部引入插件

const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin") `

| 参数 | 意义 |

| ------------------------- | ------------------------------------------------------------ |

| assetNameRegExp | 正则表达式，用于匹配需要优化或者压缩的资源名。默认值是<br/>/.css$/g |

| cssProcessor | 用于压缩和优化CSS 的处理器，默认是 cssnano. |

| cssProcessorPluginOptions | 传递给cssProcessor的插件选项，默认为{} |

| canPrint | 表示插件能够在console中打印信息，默认值是true |

| discardComments | 去除注释 |

在 plugins 模块引入

new OptimizeCssAssetsPlugin({
       assetNameRegExp:/\.css$/g,
       cssProcessor:require("cssnano"),
       cssProcessorPluginOptions:{
         preset:['default',{discardComments:{removeAll:true}}]
       },
       canPrint:true
     })

Webpack 4 学习总结

运行打包命令之后就可以压缩
webpack --mode development

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Stylin' with CSS

Wyke-Smith, Charles / 2012-10 / $ 50.84

In this completely revised edition of his bestselling Stylin' with CSS, veteran designer and programmer Charles Wyke-Smith guides you through a comprehensive overview of designing Web pages with CSS, ......一起来看看《Stylin' with CSS》这本书的介绍吧!

码农工具

URL 编码/解码

XML 在线格式化

在线 XML 格式化压缩工具

Webpack 4 学习总结

一、安装配置

以下表示安装成功

输出结果表示打包成功，大功告成 ！！！

二、使用配置文件进行打包

三、配置入口和出口的进阶使用

一、单出口形式

二、多出口形式

四、配置webpack-dev-server

一、了解 webpack-dev-server

二、安装webpack-dev-server

三、 配置webpack.config.js文件

四、配置package.json

五、运行命令

五、打包css

配置loader

测试是否打包成功

六、使用babel编译ES6

babel转化语法所需依赖项：

安装依赖

七、提取分离打包css

截图

八、压缩优化css

Stylin' with CSS

URL 编码/解码

XML 在线格式化

Markdown 在线编辑器

输出结果表示打包成功，大功告成！！！

三、配置webpack.config.js文件