webpack学习和使用二（常用配置）

其他 2020-03-03 11:41:30 阅读次数: 0

webpack学习和使用二（常用配置）


接着上一篇“ webpack学习和使用一（安装使用和简单demo）”我们继续设置一些webpack的常用配置。

附本实例 GitHub 地址，注意，由于node_modules文件太多，所以没有上传到GitHub，下载后执行 npm i 来自动安装依赖即可。

一、自动打包和刷新

1、简单化指令

现在我们执行 npx webpack 后是不是有一串黄色的警告提示？

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value......

那是因为webpack默认有开发和生产2个模式，2者根据webpack.config.js的配置来执行不同的打包方案，所以我们需要指定模式，现在执行 npx webpack --mode development 就ok了。

但是，每次打这么一串代码是不是很麻烦？方向，有简单方法。我们现在在 package.json 的script属性增加代码如下：

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

现在执行 npm run dev 就可以了，相当于执行 npx webpack --mode development

你可以分别执行 npm run dev 和 npm run bulid，然后查看boundle.js的大小，你会发现有明显变化。

2、自动打包（watch）

我们每次修改后都要执行 npm run dev来打包，是不是很麻烦？其实可以开启 “观察模式（watch）”，就可以自动打包了，在 package.json 的 scripts 增加代码如下：

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

然后执行 npx run dev-watch ，现在我们每次修改文件就会自动打包了。退出观察模式可以按 ctrl+c，注意：我们如果修改并保存配置文件后，需要退出观察模式，再执行才生效。

3、自动刷新页面（webpack-dev-server）

每次修改页面后需手动刷新才能看到最新效果，是不是很麻烦？自动打包解决了，现在解决自动刷新，需要安装本地服务器 webpack-dev-server：

扫描二维码关注公众号，回复： 9549099 查看本文章 
npm i -d webpack-dev-server

webpack.config.js配置本地服务器，增加属性 devServer：

   devServer: {
    contentBase: './dist'
  },

package.json的scripts属性修改为：

 "scripts": {
    "dev-watch": "npx webpack --watch --mode development",
    "build-watch": "npx webpack --watch --mode production",
    "dev": "npx webpack --mode development",
    "build": "npx webpack --mode production",
    "server":"npx webpack-dev-server --open"
  },

然后执行 npm run server 就能自动打开一个 http://localhost:8080/ 网址，我们变更文件后，就能自动打包，并自动刷新了，是的，webpack 的观察模式也自动开启了，十分方便。注意：我们如果修改并保存配置文件后，需要退出观察模式，再执行才生效，按 ctrl+c 退出。

二、loader 和 plugins

webpack默认只能处理js文件，如果要处理css、图片、sass等文件则要安装并配置对应的loader 和 plugins。

1、处理css文件

  • 1.1 安装 css 和 style 的依赖 style-loader 和 css-loader
npm i -d style-loader css-loader
  • 1.2 webpack.config.js配置css的 loader，增加属性module如下：
module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
  • 1.3 新增src/index.css文件，代码如下
    h1{color:red}
  • 1.4 修改index.js文件，头部导入index.css文件
import "./index.css";

var ele = document.createElement('h1');
ele.innerHTML = "Hello 大话主席!";
document.body.appendChild(ele);

再次运行 npm run server 看看效果，现在我们修改index.css后保存就能看到最新变化了：
在这里插入图片描述

2、抽离css文件

我们看到上面最终生成的css代码是用 style形式插入到html里面的，但更多情况我们是使用外链接形式，那么我们需要安装插件（plugin）

  • 2.1 安装插件（mini-css-extract-plugin）
    npm i -d mini-css-extract-plugin
  • 2.2 webpack.config.js配置插件，代码如下：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: __dirname + "/src/index.js",//唯一入口文件
  output: {
    path: __dirname + "/dist",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  },
  devServer: { //开发模式下的本地服务器
    contentBase: './dist'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, 
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'index.css' // 打包到dist/index.css
    })
  ]
}
  • 2.3 index.html增加css文件的引用
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>webpack test</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

现在我们再开启server服务就能看到效果了。

3、处理Sass文件

  • 3.1 安装sass依赖，sass-loader依赖node-sass，所以要装2个
    npm i -d node-sass
    npm i -d sass-loader

  • 3.2 webpack.config.js配置sass，在’css-loader’后增加’sass-loader’代码如下：

  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: [
          MiniCssExtractPlugin.loader, 
          'css-loader',
          'sass-loader'
        ]
      },
    ]
  },
  • 3.3 新增src/index.scss文件，代码如下：
$fontSize: 50px;
h1{
    color:blue;
    font-size:$fontSize;
}
  • 3.4 index.js导入index.scss，并去掉index.css的导入
import "./index.scss";

var ele = document.createElement('h1');
ele.innerHTML = "Hello 大话主席!";
document.body.appendChild(ele);

现在我们再开启server服务就能看到效果了。

4、创建 Source Map

我们开发环境下，还是需要调整css的，现在用到了sass，那么还需要source map来查看元素样色具体对应的scss文件代码位置，现在开启source map：

  • 4.1 webpack.config.js配置sourceMap
    新增 2个属性 mode:'development', devtool:'source-map', 同时修改 css-loader和sass-loader，开启sourceMap，具体代码如下：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode:'development',
  devtool:'source-map', //devtool模式有很多，自行百度
  entry: __dirname + "/src/index.js",//唯一入口文件
  output: {
    path: __dirname + "/dist",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  },
  devServer: { //开发模式下的本地服务器
    contentBase: './dist'
  },
  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: [
          MiniCssExtractPlugin.loader, 
          {
            loader:'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader:'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'index.css' // 打包到dist/index.css
    })
  ]
}

现在我们审查元素就能看到元素对应的scss代码了
在这里插入图片描述

5、压缩css文件

  • 5.1 安装optimize-css-assets-webpack-plugin插件
    npm i -d optimize-css-assets-webpack-plugin
  • 5.2 webpack.config.js配置optimize-css-assets-webpack-plugin插件
    顶部增加模块依赖 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
    再增加属性optimization: { minimizer: [new OptimizeCSSAssetsPlugin({})] }
    注意：需生产模式才能生效，即执行npm run build才能看到压缩后文件效果

6、压缩js文件

  • 6.1 安装uglifyjs-webpack-plugin插件
    npm i -d uglifyjs-webpack-plugin
  • 6.2 webpack.config.js配置uglifyjs-webpack-plugin插件
    顶部增加模块依赖 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
    再修改optimization属性如下：
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true //是否需要sourceMap
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  }

注意：需生产模式才能生效，即执行npm run build才能看到压缩后文件效果

7、处理图片和字体图标

如果我们在html插入图片，你们会提示错误，因为还要加载文件的loader：

  • 7.1 安装file-loader插件
    npm i -d file-loader
  • 7.2 webpack.config.js配置file-loader，use属性增加代码如下：
   {
     test: /\.(png|svg|jpg|gif)$/,
     use: [
       'file-loader'
     ]
   },
   {
     test: /\.(woff|woff2|eot|ttf|otf)$/,
     use: [
       'file-loader'
     ]
   }
  • 7.3 index.js使用代码插入img
import "./index.scss";

//插入元素
var ele = document.createElement('h1');
ele.innerHTML = "Hello 大话主席!";
document.body.appendChild(ele);

//插入图片
var img = document.createElement('img');
img.src = "https://img.t.sinajs.cn/t6/style/images/global_nav/WB_logo.png";
document.body.appendChild(img);

常用的配置已做好，可以此基础来进行开发了，下一篇将介绍“进阶使用”。

附本实例 GitHub 地址，注意，由于node_modules文件太多，所以没有上传到GitHub，下载后执行 npm i 来自动安装依赖即可。

大话主席
发布了43 篇原创文章 · 获赞 2 · 访问量 4616
私信 关注

猜你喜欢

转载自blog.csdn.net/iamlujingtao/article/details/101161598
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022