webpack

最新推荐文章于 2024-05-16 09:55:01 发布

马宸

最新推荐文章于 2024-05-16 09:55:01 发布

阅读量316

点赞数

分类专栏： vue 文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/weixin_52761444/article/details/121825084

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.webpack简介

webpack官网:https://webpack.docschina.org

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

文件之间互相依赖关系复杂
浏览器对于js的新语法特性兼容性也不是很好
webpack可以解决上述问题。
浏览器对于Es6的模块化支持不是很友好

使用webpack就可以解决上述的问题

2.我们使用npm使的注意事项

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

两种都有自己的简写模式

只在开发环境使用 npm install xx -D 在开发和上线以后度需要使用的就使用 npm install xx -S

3.使用webpack

3.1初始化文件

首先我们需要先初始化,创建出来一个pack.json文件方便以后的使用

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

	npm install jquery -S 安装jquery包

我们默认的文件夹就是rc文件夹,里面新创建一个新的文件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");
});

3.2 webpack使用步骤

1.npm install webpack webpack-cli -D 安装webpack
2.npm install webpack-dev-server -D 安装自动打包的工具
3. npm install html-webpack-plugin -D 安装把html显示在根目录的文件
4.npm install style-loader css-loader -D 安装对应处理css的loader
5.npm install less-loader less -D  安装对应处理less文件的loader
6.npm install postcss-loader autoprefixer -D 安装自动进行适配的插件

注意,我们想使用自动打包工具需要在package.json文件中修改一个重要的配置

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

新建webpack.config.js,配置代码如下：

module.exports = {
  mode: "development", //可以是development开发模式或者production生产上线模式
};
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], //指明使用的插件
  module: {
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] },
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] }   //如果后缀名字是less,那么就使用什么组件来解析
    ],
  },
};

这就是我们所需要的所有配置

在index.html文件中写入自己需要的daima

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/bundle.js"></script>
</head>
<body>
    <div id="box">这是一些测试文字</div>
    <ul>
        <li>这是li1</li>
        <li>这是li1</li>
        <li>这是li1</li>
        <li>这是li1</li>
    </ul>
</body>
</html>

新建一个index.js文件引入我们所需要的模块

import $ from "jquery";  //使用jquerymokuai
import "./css/index.css"; //引入css文件
import "./css/index.less"; //引入自己创建的less文件
$(function(){
    $("#box").css("color","green"); 
})

4.webpack使用的需要记住的事

首先,我们需要牢记调用webpack文件的mingling

npm run dev   //这是使用打包工具的命令

这是我们最简单使用webpack打包工具的package.json文件

{
  "name": "1209",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "css-loader": "^6.5.1",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "postcss-loader": "^6.2.1",
    "style-loader": "^3.3.1",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
  }
}

我们在查看的文件地址时使用的也是我们的打包工具使用以后的地址 http://localhost:8080/
这就是我们使用打包工具显示的网页内容:

马宸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
webpack

1.webpack简介webpack官网:https://webpack.docschina.orgwebpack是一个流行的前端项目构建工具（打包工具），因为我们目前web开发会有下面几个问题：文件之间互相依赖关系复杂浏览器对于js的新语法特性兼容性也不是很好webpack可以解决上述问题。浏览器对于Es6的模块化支持不是很友好使用webpack就可以解决上述的问题2.我们使用npm使的注意事项npm install xx -D 即写入devDependencies对象（里面的插
复制链接

扫一扫