webpack打包

最新推荐文章于 2024-09-13 13:57:52 发布

幻墨如烟u

最新推荐文章于 2024-09-13 13:57:52 发布

阅读量1.2k

点赞数

分类专栏：笔记文章标签： webpack

本文链接：https://blog.csdn.net/sjs1766349405/article/details/121848286

版权

笔记专栏收录该内容

45 篇文章 1 订阅

订阅专栏

本文详细介绍了webpack作为前端项目构建工具的作用，包括解决文件依赖、浏览器兼容性等问题。讲解了npm安装、webpack配置、自动打包、入口出口设置、html-webpack-plugin配置以及加载器的使用，如style-loader、css-loader、less-loader等。

摘要由CSDN通过智能技术生成

一、webpack

1.简介

webpack官网

webpack是一个流行的前端项目构建工具（打包工具），因为我们目前web开发会有下面几个问题：

文件之间互相依赖关系复杂
浏览器对于Es6的模块化支持不是很友好
浏览器对于js的新语法特性兼容性也不是很好

webpack可以解决上述问题。

2.npm补充

两者都会安装到项目文件夹下的node_modules文件夹下

npm install xx -D 即写入devDependencies对象（里面的插件只用于开发环境，不用于生产环境）
save开头——开发和生产环境，记住这个就行 npm install xx -S 即写入dependencies对象（生产环境）

比如我们jquery是项目打包后还需要使用的我们用

npm install jquery -S

我们的less 是开发的时候用，项目上线以后使用的转换侯的css代码，所以我们用

npm install less -D

3.为什么使用webpack

使用npm init -y初始化package.json文件

npm install jquery -S 安装jquery包

新建src文件夹,里面index.html代码如下：

 <head>
    <script src="index.js"></script>
  </head>
  <body>
    <div id="box"></div>
  </body>

src文件夹中新建index.js代码如下：

import $ from "jquery";

$(function() {
  $("#box").css("color", "red");
});

此时浏览器访问页面，会报下面的错误

Uncaught SyntaxError: Unexpected identifier

因为浏览器不能识别es6中的import导入语法，所以我们需要借助webpack解决

4.webpack使用步骤

npm install webpack webpack-cli -D 安装webpack
新建webpack.config.js,配置代码如下：

module.exports = {
  mode: "development" //可以是development开发模式或者production生产上线模式
};

修改package.json文件，添加代码如下：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",//这个是本来就有的
    "dev": "webpack"
  },

npm run dev

然后我们在命令行终端执行npm run dev就可以执行webpack打包命令了。此时就会自动生成一个dist文件夹，里面有main.js就是我们打包好的文件。我们在src/index.html中引入你打包好的main.js再重新运行就没有问题了

5.配置打包的入口和出口

webpack默认打包的入口文件是src/index.js,打包后的出口文件是dist/main.js文件。如果我们想修改打包后的入口和出口文件，需要如下配置：

修改webpack.config.js文件如下：

const path = require("path"); //引入处理路径的path模块

module.exports = {
  mode: "development", //可以是development开发模式或者production生产上线模式
  entry: path.join(__dirname, "./src/index.js"),
  output: {
    path: path.join(__dirname, "./dist"), //指定输出文件路径
    filename: "bundle.js" //输出文件的名称
  }
};

此时我们再重新运行npm run dev命令，就会在dist目录中重新生成新的打包文件bundle.js,然后我们在index.html引入并使用即可。

6.配置webpack自动打包

因为我们后期每次修改了index.js里面的代码，index.html并不会立马起作用，因为它引入的打包后的bundle.js文件,我们需要每次重新npm run dev打包再测试，特别麻烦，所以建议使用webpack的自动打包配置。

第一步 npm install webpack-dev-server -D
第二步修改package.json文件

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",//这是原来就有的
    "dev": "webpack-dev-server"//把webpack修改如右侧的内容
  },

-第三步修改index.html的引入路径

<script src="/bundle.js"></script>

第四步 npm run dev 启动webpack的自动打包
第五步测试我们随便修改index.js代码的内容，浏览器访问index.html的时候页面效果都会跟着发生变化注意：我们默认访问路径是：

http://localhost:8080/src/index.html

浏览器访问效果图如下：此时访问会出错，我们需要把1.7也配置成功，才能正确显示index.html页面。

7.配置html-webpack-plugin

安装插件 npm install html-webpack-plugin -D
修改webpack.config.js

const path = require("path"); //引入处理路径的path模块
const HtmlWebpackPlugin = require("html-webpack-plugin"); //导入模板处理插件
const HtmlPlugin = new HtmlWebpackPlugin({
  template: "./src/index.html",
  filename: "index.html"
});//指定复制的源文件地址
module.exports = {
  mode: "development", //可以是development开发模式或者production生产上线模式
  entry: path.join(__dirname, "./src/index.js"),
  output: {
    path: path.join(__dirname, "./dist"), //指定输出文件路径
    filename: "bundle.js" //输出文件的名称
  },
  plugins: [HtmlPlugin]//指明使用的插件
};

重新运行 npm run dev
浏览器访问 http://localhost:8080就能直接访问index.html页面了，不用再http://localhost:8080/src/index.html访问了

8.webpck加载器

webpack默认只能处理.js后缀的文件，但是其他类型的文件默认无法直接打包，所以我们需要安装loader加载器。

less-loader可以辅助打包.less相关的文件
sass-loader可以辅助打包.sass相关的文件
url-loader可以辅助打包路径相关的文件

打包css文件

比如我们新建css/index.css文件，然后在index.js引入css文件，此时再打包的时候就会报错，引入它不能直接打包css文件

npm install style-loader css-loader -D 安装对应处理loader
修改webpack.config.js文件，添加module->rules规则

module.exports = {
  mode: "development", //可以是development开发模式或者production生产上线模式
  entry: path.join(__dirname, "./src/index.js"),
  output: {
    path: path.join(__dirname, "./dist"), //指定输出文件路径
    filename: "bundle.js" //输出文件的名称
  },
  plugins: [HtmlPlugin],
  module: {
    rules: [{ test: /\.css$/, use: ["style-loader", "css-loader"] }]
  }
};

此时再重新启动npm run dev就可以打包css文件了

打包less文件

比如我们src/css下面新建index.less,里面随便写点less代码，比如：

ul {
  li {
    list-style: none;
  }
}

然后在index.js引入less文件

import "./css/index.less";

直接运行也会报错，所以我们需要按步骤安装下面的几个loader

npm install less-loader less -D
修改webpack-config.js

 module: {
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] }
    ]
  }

此时再npm run dev就能正常识别了。