webpack的基本使用

最新推荐文章于 2024-05-21 22:42:59 发布

bug丸

最新推荐文章于 2024-05-21 22:42:59 发布

阅读量455

点赞数

分类专栏：打包构建文章标签： webpack 前端

本文链接：https://blog.csdn.net/weixin_50576800/article/details/122290391

版权

打包构建专栏收录该内容

9 篇文章 0 订阅

订阅专栏

webpack基本使用

这里所有都是基于webpack4的学习

为什么要使用webpack

web开发的困境：文件依赖关系复杂；静态资源请求效率低下；模块化支持不友好；浏览器对高级js兼容性不友好

而webpack可以解决这些问题

基本打包使用

1）npm i webpack webpack-cli -D

2) 在项目根目录中创建 webpack.config.js 文件

3）配置webpack.config.js文件

基本配置：

const path = require("path");
module.exports = {
  mode: "development",
  entry: path.join(__dirname, "./src/all.js"),   // 打包入口，默认为src/index.js
  output: {   // 打包生成的文件，默认生成main.js放在根目录的dsit文件夹中
    path: path.join(__dirname, "./dist"),
    filename: "bundle.js",
  },
};

mode模式主要后开发模式和生产模式，开发模式打包不会对代码进行压缩和混淆，所以打包更快，生产模式打包会对代码进行压缩和混淆，他的打包后体积更小

在package.json配置脚本**

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"  // 新增
  },

5) 运行dev脚本 npm run dev

实例：

项目根目录的src文件夹下有三个文件

es6.js文件

const test = "hello";
export { test };

test.js文件，主要是实现隔行变色的效果

import { test } from "./es6.js";

(function () {
  let lis = document.querySelectorAll("li");
        console.log(test);
  for (let i = 0; i < lis.length; i++) {
    if (i % 2 !== 0) {
      lis[i].style.backgroundColor = "red";
    } else {
      lis[i].style.backgroundColor = "green";
    }
  }
})();

index.js文件

 <body>
    <ul>
      <li>第1个</li>
      <li>第2个</li>
      <li>第3个</li>
      <li>第4个</li>
      <li>第5个</li>
      <li>第6个</li>
      <li>第7个</li>
      <li>第8个</li>
    </ul>
    <script src="./all.js"></script>
    <!-- <script src="../dist/bundle.js"></script> -->
  </body>

这样在浏览器中打开index.html会报错，原因是浏览器对es6模块化语法支持不太好，而我index.js中引入了es6.js文件

而23webpack可以帮我们解决这个问题，我们配置好webpack后，执行npm run dev 命令，引入打包后的js文件，就可以解决报错，看到隔行变色效果

自动打包

上面的打包不会自动打包，当我修改了all.js文件，需要重新运行脚本 npm run dev 才能看到最新的效果，每次修改都需要手动打包才能看到效果，为了解决这个问题，我们需要添加写配置

 // 1 安装 webpack-dev-server
 npm i webpack-dev-server -D

 // 2 修改package.json脚本
 "dev": "webpack-dev-server"
 
 // 3 修改进入的打包文件的路径
 <script src="/bundle.js"></script>
 
 注意：webpack-dev-server 会启动一个实时的http服务器；
      打包生成的输出文件，默认放在了项目过呢目录中，而且是虚拟的，看不见的

文件默认被托管再了http://localhost:8080/,打开我们就可以看到这些文件了，打开index.html就可以看到隔行变色，更改文件，视图也会即使更新，实现了自动打包

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-um5oUY7J-1641204223470)(C:\Users\lucas\Desktop\学习\图片\afterPackage.jpg)]

这里我遇到了点问题：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q4quFBXZ-1641204223472)(C:\Users\lucas\Desktop\学习\图片\webpack-dev-server-err.jpg)]

记得安装匹配的版本，webpack-cli全局装了还不行，我有 npm i webpack-cli -D 装了一遍

我最终选择的版本 “webpack-cli”: “^3.2.1”, “webpack-dev-server”: “^3.1.14”

自动打包的其他配置

自动打开浏览器： “dev”: “webpack-dev-server --open”

默认端口host: “dev”: “webpack-dev-server --open --host 127.0.0.1”

默认端口port: “dev”: “webpack-dev-server --open --host 127.0.0.1 --port 8888”

html-webpack-plugin生成预览页面

上面一步通过localhost:8080访问src下的index.html，可以看到页面，但是我们想要的效果是打开

http://localhost:8080/能够直接看到页面

其实我们只要将index.html复制一份，放到根目录下就可以了，8080默认打开index.html

1安装html预处理器，我安装的是3.2.0版本
npm install html-webpack-plugin -D

2.修改webpack.config.js文件配置
const HtmlWebpackPlugin = require("html-webpack-plugin");
//  创建此插件的实例对象;
const htmlPlugin = new HtmlWebpackPlugin({
  template: "./src/index.html", // 指定要用的模板文件
  filename: "index.html", //生成的问爱你名称，该文件存在于内存中，在目录中不显示
});

 plugins: [htmlPlugin], // plugins数组是webpack打包期间会用到的一些插件列表

webpack中loader加载器的使用

webpack默认只能打包js文件，其他文件打包不了，所以我们要借助loader来帮忙，使用loader加载器进行预编译

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uAcyrix4-1641204223473)(C:\Users\lucas\Desktop\学习\图片\loader.jpg)]

打包处理css文件

1）npm i style-loader css-loader -D

2）配置webpack.config.js
  module: {
    rules: [{ test: /.css$/, use: ["style-loader", "css-loader"] }],
  }

test: 标识匹配的文件类型

use: 可以接收字符串或数组，指定的loader（一个或多个）顺序是固定的，多个loader的调用顺序是从后往前

版本问题容易报错，我使用的版本： “css-loader”: “^4.0.0”, “style-loader”: “^1.2.1”

打包处理less文件

1) npm i less less-loader -D
2) 修改配置，添加处理less文件的loader
{ test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] }

我用的版本： “less”: “^3.9.0”, “less-loader”: “^4.1.0”

打包处理scss文件

 npm i sass-loader node-sass -D 
 { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] }

我选择的版本"sass-loader": “^7.3.1”, node-sass@4.14.1@node-sass"

打包处理css兼容前缀

因为有些css属性浏览器不兼容，需要加上前缀处理，所以我们统一使用postcss-loader处理

npm i post-loader autoprefixer -D
// 修改配置
const autoprefixer = require("autoprefixer");
 plugins: [htmlPlugin, autoprefixer]
{ test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] },

版本容易报错，我使用的版本：“postcss-loader”: “^4.0.0”

打包处理图片和字体

npm i url-loader file-loader -D

      {
        test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
        use: "url-loader?limit=20000",
      },

limit用来指定图片大小（单位byte）,小于它，就会被转为base64的图片，加载更快

打包处理js文件中的高级语法

1）安装babel转换器相关的包 npm i babel-loader @babel/core @babel/runtime -D

2）安装babel语法插件相关的包，npm i  babel /preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

3）项目根目录下创建babel配置文件，并初始化基本配置

module.exports = {
  presets: ["@babel/preset-env"],
  plugins: [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties",
  ],
};

4）配置webpack.config.js
{
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },

webpack与vue

webpack中配置vue组件的加载器

npm i vue-loader vue-template-compiler -D

修改webpack.config.js配置文件

const VueLoaderPlugin = require("vue-loader/lib/plugin");
plugins: [htmlPlugin, autoprefixer, new VueLoaderPlugin()]
      {
        test: /\.vue$/,
        use: "vue-loader",
      },

在webpack中使用vue

1）创建一个vue文件
2）npm i vue -S
3）引入vue组件，并在index.html中添加#app的标签，让vue渲染在这个标签中（通过render函数，将App这个vue组件渲染到el，及id为app的区域中）

import App from "./components/App.vue";
  const vm = new Vue({
    el: "#app",
    render: (h) => h(App),
  });