Webpack 配置入门

最新推荐文章于 2023-06-07 13:34:47 发布

「已注销」

最新推荐文章于 2023-06-07 13:34:47 发布

阅读量293

点赞数

分类专栏：前端框架

本文链接：https://blog.csdn.net/weixin_42190893/article/details/102848176

版权

本文介绍了Webpack的基础知识，包括其概念、安装和项目配置。通过一系列的Demo，详细展示了如何配置和使用Webpack，包括资源管理、CSS样式处理、图片资源加载、分片打包、调试开发与热加载HMR、混淆压缩、公共代码分离和CSS分离。文章还讨论了Webpack的优点和缺点，以及在不同场景下的应用。

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

更新：Webpack4已经发布，本篇是基于Webpack3的，请注意。
更正：
1.package.json中使用了应该使用本地webpack而不是全局webpack。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dist": "webpack",
    "build:dll": "webpack --config webpack.config.dll.js",
    "build:dev": "webpack-dev-server --config webpack.config.dev.js --open",
    "build:pord": "webpack --config webpack.config.pord.js"
  },

应为：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dist": "./node_modules/.bin/webpack",
    "build:dll": "./node_modules/.bin/webpack --config webpack.config.dll.js",
    "build:dev": "./node_modules/.bin/webpack-dev-server --config webpack.config.dev.js --open",
    "build:pord": "./node_modules/.bin/webpack --config webpack.config.pord.js"
  },

webpack.config.js文件中output.publicPath缺失，应为:

  output: {
    publicPath: "http://www.example.com/", // <---- 这里填写web访问地址，域名、IP、CDN等
    filename: '[name]_[chunkhash:20].js',               // 输出带20位hash的文件名
    path: path.resolve(__dirname, 'dist'),              // 输出路径
  },

output.publicPath会更正文件或资源的前缀，在正式部署时特别必要。

一、什么是webpack，为什么要使用它？

1.官方解释

webpack是一个现代JavaScript应用程序的模块打包器(module bundler)。

2.个人理解

webpack是一个模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块进行处理，找到其它的模块如css及一些浏览器不能直接运行的拓展语言模块Scss，TypeScript等，并选择相应的插件进行处理，并将处理结果转换打包为合适的格式供浏览器使用。

3.优缺点

Grunt以及Gulp是在一个配置文件中指定对文件处理的具体流程，如校验->编译->组合->压缩等。配置比较繁琐，但是可定制性比较高。

webpack把整个项目当成整体，从入口查找文件关系，然后整体的以文件为单位使用loader对代码进行处理，最后打包为一个或者多个浏览器识别的文件。配置相对简单，处理速度快，高级场景下定制能力有限，但是大部分情况下可以替代Grunt以及Gulp。

二、安装webpack

1.安装

1.1前置条件

安装nodejs，nodejs.org，不再详述

1.2安装方式

在终端运行命令：

# 全局安装
npm install -g webpack
# 安装到项目目录
npm install --save-dev webpack

上面两个命令可以选择执行一个，但建议执行两个。项目中安装一个置指定版本的webpack，全局的webpack作为备份项。

三、项目中的webpack

1.项目

如果已经有npm项目请略过。

# 前往工作区，[$WORKSPACE]替换为自己的工作区路径
cd [$WORKSPACE]
# 创建项目目录
mkdir webpack_demo
# 初始化package.json，可以一路略过
npm init

2.安装webpack

# 安装的项目目录
npm install --save-dev webpack

3.Demo01 - Hello Webpack

建立如下目录结构

.
├── dist
│   └── index.html
├── package.json
├── public
└── src
    ├── Welcome.js
    └── index.js

代码如下：

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

// index.js
import welcome from './Welcome.js'

document.querySelector("#root").appendChild(welcome());

// Welcome.js
export default function() {
  var welcome = document.createElement('div');
  welcome.textContent = "Hello webpack!";
  return welcome;
};

webpack可以通过命令行使用，可以先通过下面的方式调用：

$> node_modules/.bin/webpack src/index.js dist/bundle.js
Hash: 098382ad52c485fbdff8
Version: webpack 3.6.0
Time: 66ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.78 kB       0  [emitted]  main
   [0] ./src/index.js 96 bytes {0} [built]
   [1] ./src/Welcome.js 138 bytes {0} [built]

此时可以动过浏览器访问dist/index.html

4.Demo02 - 通过配置文件来使用webpack

webpack虽然支持使用命令行的方式配置使用，但Demo01中使用命令行的方式输入起来还是比较繁琐。webpack支持使用配置文件进行参数配置。

在项目根目录下创建webpack.config.js文件（这也是webpack的默认配置文件）：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

然后可以执行命令进行编译打包：

# 指定配置文件
./node_modules/.bin/webpack --config webpack.config.js
# 使用默认配置文件
./node_modules/.bin/webpack
# 使用作用域最近的webpack，并且使用默认配置文件
webpack

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack 配置入门

更新：Webpack4已经发布，本篇是基于Webpack3的，请注意。更正：1.package.json中使用了应该使用本地webpack而不是全局webpack。 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dist": "webpack", "bu...
复制链接

扫一扫

专栏目录