Webpack核心

最新推荐文章于 2023-01-18 16:20:06 发布

chenhanhan_

最新推荐文章于 2023-01-18 16:20:06 发布

阅读量141

点赞数 1

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

本文链接：https://blog.csdn.net/chenhanhan_/article/details/120721335

版权

Webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

webpack核心内容

一、使用webpack

index.html文件：

<!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>
</head>
<body>
  <div id="app">
  <script src="./dist/bundle.js"></script>
</body>
</html>

show.js文件

function show(content) {
  window.document.getElementById('app').innerText = 'Hello,' + content;
}
//通过CommonJS导出show函数
module.exports = show;

main.js文件

//导入show函数
const show = require('./show');
//执行show函数
show('webpack')

webpack.config.js文件，webpack执行构建时会从中读取配置。

const path = require('path')
module.exports = {
  //JS执行入口文件
  entry: './main.js',
  output: {
    //将所有依赖的模块合并输出到一个bundle.js文件
    filename: 'bundle.js',
    //将输出文件都放到dist目录下
    path:path.resolve(__dirname,'./dist'),
  }
}

一切文件就绪后，运行webpack构建后，目录会多出dist目录，里面有一个bundle.js文件。
bundle.js文件是一个可执行的JavaScript文件，它里面包含所依赖的两个文件模块main.js和show.js，以及内置的webpackBootstrap启动函数

二、使用Loader

要支持非JavaScript类型文件，需要使用webpack的Loader机制。

const path = require('path')
module.exports = {
  //JS执行入口文件
  entry: './main.js',
  output: {
    //将所有依赖的模块合并输出到一个bundle.js文件
    filename: 'bundle.js',
    //将输出文件都放到dist目录下
    path:path.resolve(__dirname,'./dist'),
  },
  module: {
    rules: [
      {
        //用正则表达式去匹配要用该Loader转换的CSS文件
        test: /\.css$/,
        use:['style-loarder','css-loarder?minimize'],
      }
    ]
  }
}

Loader的执行顺序是从后到前的。minimize告诉css-loader要开启css压缩。
记得引入插件：

npm i -D style-loader scc-loader

三、使用Plugin

（用来扩展webpack功能，通过在构建流程中注入钩子实现）

const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
  //JS执行入口文件
  entry: './main.js',
  output: {
    //将所有依赖的模块合并输出到一个bundle.js文件
    filename: 'bundle.js',
    //将输出文件都放到dist目录下
    path:path.resolve(__dirname,'./dist'),
  },
  module: {
    rules: [
      {
        //用正则表达式去匹配要用该Loader转换的CSS文件
        test: /\.css$/,
        // use:['style-loarder','css-loarder?minimize'],
        loaders: ExtractTextPlugin.extract({
          use:['css-loader']
        })
      }
    ]
  },
  Plugins: [
    new ExtractTextPlugin({
      //从.js文件中提取出来的.css文件的名称
      filename:`[name]_[contenthash:8].css`,
    }),
  ]
}

记得引入插件

npm i -D extract-text-webpack-plugin

四、使用DevServer

DevServer会启动一个HTTP服务器用于服务网页请求，同时会帮助启动webpack，并接收webpack发出的文件变更信号，通过WebSocket协议自动刷新网页做到实时预览。
安装插件：

npm i -D webpack-dev-server

1、为什么DevServer启动后访问8080端口页面空白？

因为DevServer会将webpack构建的文件保存在内存中，在要访问输出的文件时，必须通过HTTP服务访问。

2、实时预览

在启动webpack时通过webpack --watch来开启监听模式。
devServer执行流程

3、尝试修改index.html文件并保存，发现不会触发以上机制，为什么呢？

在这里插入图片描述
Webpack不知道index.html的存在。

五、核心概念

Entry:入口
Module:模块，webpack会从配置的Entry开始递归找出所有依赖的模块
Chunk:代码块
Loader：模块转换器
Plugin：扩展插件
Output：输出结果

chenhanhan_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack核心

webpack核心内容一、使用webpackindex.html文件：<!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-sca
复制链接

扫一扫