webpack自动打包、热更新、css-loader、style-loader

最新推荐文章于 2022-09-22 11:14:49 发布

写给自己！

最新推荐文章于 2022-09-22 11:14:49 发布

阅读量539

点赞数 1

文章标签： webpack webpack热更新 css-loader style-loader webpack打包

本文链接：https://blog.csdn.net/weixin_45415458/article/details/101053286

版权

一个简单的思维图，不是很规范

在这里插入图片描述

首先，项目目录下执行

	npm init -y

webpack 命令行相关的内容都迁移到 webpack-cli，所以除了 webpack 外，我们还需要安装 webpack-cli：

	npm install webpack  webpack-cli -g  --save-dev

安装：

	npm i  webpack-dev-server -D

安装：

	npm i  webpack -D

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。例如，加载css文件

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

项目下创建目录结构如下，html,main.js在src目录下，下面三个配置文件在根目录下

在这里插入图片描述

手动创建webpack.config.js下面进行如下的配置：

const path = require('path');

module.exports = {
    mode:"development",//通过选择 development 或 production 之中的一个，开发模式或者生产模式
  entry: './src/main.js',//入口文件
  output: {
    path: path.resolve(__dirname, 'dist'),//出口文件
    filename: 'bundle.js'//出口文件下面的js名字
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use:['style-loader','css-loader']
      }
    ]
  },
};
//我这里写的配置只是基础，入口出口就只有一个，入口出口有多个还需要修改

package.json下面看有没有漏掉的,如果有遗漏手动加上去，然后执行npm i

"devDependencies": {
    "css-loader": "^3.2.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.40.2",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.1"
  }

index.html页面下：

<!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>
</head>
<body>
    <div>哈哈哈</div>
</body>
</html>

index.css页面下：

body{
    background:red;
}

main.js文件下：

import './css/index.css';

执行命令打包后会自动生成dist文件，下面有个bundle.js文件：

	webpack

在这里插入图片描述

index.html页面下引入打包好的bundle.js文件：

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

打开开浏览器看看效果把，这样就行了，但是有一个问题，就是修改css里面的内容后，又需要重新打包，这样就显的很麻烦。那么就往下面看:

package.json目录下script下面加上dev跟build属性

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open",//默认端口号8080，要修改就在后面加上其它端口,看完删除备注不然报错
    "build": "webpack --mode production"
  },

控制台执行：

npm run dev

执行完后有一个服务器http://localhost:8080/src/，打开看看body的背景为红色。现在打包后的输出js文件就放在这个服务器上面了
js文件就在这上面http://localhost:8080/bundle.js可以看看
修改index页面，重新引入：

<script src="/bundle.js"></script>	//注意这里src引入的反斜杠前面不要加.

这样就好了，修改css上面的内容，页面也跟着变化，项目做好之后，webpack打包一次，然后把index上面引入的js文件变回来就行了

写给自己！

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
webpack自动打包、热更新、css-loader、style-loader

一个简单的思维图，不是很规范首先，项目目录下执行 npm init -ywebpack 命令行相关的内容都迁移到 webpack-cli，所以除了 webpack 外，我们还需要安装 webpack-cli： npm install webpack webpack-cli -g --save-dev安装： npm i webpack-dev-server -D 安装：...
复制链接

扫一扫