webpack打包学习笔记01-webpack安装与配置

最新推荐文章于 2024-04-29 04:53:26 发布

原创最新推荐文章于 2024-04-29 04:53:26 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack打包学习笔记

webpack打包学习笔记专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍如何使用Webpack构建项目，从初始化项目、安装依赖到配置构建流程。通过具体步骤讲解Webpack的使用方法，包括如何设置入口文件、输出路径及使用自定义配置文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先找个空文件夹 npm init，初始化项目，包含基本的信息，

本地安装

npm install --save-dev webpack

webpack4+版本需要cli支持

npm install --save-dev webpack-cli

"scripts": {
    "build": "webpack --config webpack.config.js"
}

全局安装

npm install --global webpack

起步

此时目录结构如下

这里，你可以任意写些东西进去

移除package.json里面的main入口，然后设置private： true，防止意外发布，可以安装一个全局调用的工具插件loadash，自行百度

npm install --save lodash

此时的目录结构按照当前标识来，

运行命令： npx webpack 执行打包过程，此时，会默认将src/index.js作为入口，并在dist文件下默认打包生成main.js

可以考到main.js是压缩好的代码，

这里简短的介绍下npx，一般来说，如果通过npm运行webpack，则需要在script对象中配置 build: "webpack"，通过npm run build调用，如果通过命令行方式，需要

 node-modules/.bin/webpack

所以直接运行npx更方便

使用一个配置文件

先在package.json同目录下建立一个webpack.config.js文件，内容如下

const path = require('path');

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

这里定义了入口，之前默认的也是这个，webpack默认配置了一些东西，但是由于项目的复杂度，需要进行额外的配置，这里就为了解决自己配置的问题，在package.json中配置： script: { build: "webpack --config webpack.config.js"}, --config是webpack指定引入自定义配置项，这里通过目录结构可以自行决定配置文件的位置，比如可以自己建立一个文件夹config，把webpack.config.js放进去，然后修改package “webpack --config config/webpack.config.js”