webpack基本配置及使用介绍

最新推荐文章于 2024-07-23 16:39:39 发布

蓝色六一

最新推荐文章于 2024-07-23 16:39:39 发布

阅读量142

点赞数 1

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

本文链接：https://blog.csdn.net/qq_39241544/article/details/103668586

版权

webpack 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

webpack简介

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

首先在项目文件夹下安装webpack、webpack-dev-server、webpack-cli

cnpm i webpack webpack-dev-server webpack-cli -D

配置package.json文件dev

{
  "name": "webpack2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.4",
    "webpack-dev-server": "^3.10.1"
  }
}

在项目目录下定义一个webpack.config.js文件

entry：打包入口文件webpack加载main.js文件，依次进行打包，包含引用的文件
output：打包文件输出路径，及名称
devServer：基本配置
open：自动打开浏览器
hot：热更新
port：端口
host：主机
contentBase：托管文件夹，服务运行后的文件，默认打开文件夹下的index.html

const path = require("path");
module.exports = {
   entry: path.join(__dirname, "./src/main.js"),
   output: {
      path: path.join(__dirname, "./dist"),
      filename: 'bundle.js'
   },
   devServer: {
      open: true,
      hot: true,
      port: 8087,
      host: 'localhost',
      contentBase: path.join(__dirname, "./src")
   }
}

插件安装

安装html-webpack-plugin插件，引用打包后的文件路径（内存中）

cnpm i html-webpack-plugin -D

在webpack.config.js引用，并添加到plugins配置中

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "./src/index.html"),
            filename: 'index.html'
        })
    ]
}

下面在main.js里面添加document.getElementById('content').style.color = "red";查看效果

检查源码可以发现<script type="text/javascript" src="bundle.js"></script>引用了打包好的文件

<!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>
	    <p id="content">这是一个content</p>
		<script type="text/javascript" src="bundle.js"></script>
	</body>
</html>

使用css-loader打包css文件，安装cnpm i css-loader style-loader -D，配置完成后在main.js引入css文件就ok
scss需安装cnpm i sass sass-loader node-sass -D并配置rules，然后在main.js引入

rules：加载器集合
test：正则匹配css
use：使用加载器去打包匹配的文件

module: {
   rules: [
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.sass|scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }
    ]
}