Webpack4.x - 入门

最新推荐文章于 2022-11-02 12:48:53 发布

seaalan

最新推荐文章于 2022-11-02 12:48:53 发布

阅读量121

点赞数

分类专栏： Webpack

本文链接：https://blog.csdn.net/seaalan/article/details/89713770

版权

Webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

参考链接：https://www.webpackjs.com/guides/getting-started/

安装方式

本地安装

npm install webpack webpack-cli --save-dev

全局安装（不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。）

npm install --global webpack webpack-cli

使用方式

进入 webpack.config.js所在目录

cli方式

npx webpack

配置文件方式

npx webpack --config webpack.config.js

NPM 脚本(NPM Scripts)方式

npm run build

webpack --watch     // 监听变动并自动打包
webpack -p          // 压缩混淆脚本，这个非常非常重要！
webpack -d          // 生成map映射文件，告知哪些模块被最终打包到哪里了

示例DEMO

DEMO结构（dist是构建过程产生的代码最小化和优化后的“输出”目录；src为源目录。）
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>Webpack Test</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js文件（cli方式输出的文件）
bundle.js文件（其他两种方式输出的文件）
index.js文件

import _ from 'lodash';

function component() {
    var element = document.createElement('div');
  
    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  
    return element;
  }
  
  document.body.appendChild(component());

package.json文件

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1"
  },
  "dependencies": {
    "lodash": "^4.17.11"
  }
}

webpack.config.js文件

const path = require('path');

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

在项目中使用webpack步骤：