webpack安装流程

Webpack 打包教程
本文介绍 Webpack 的安装流程及基本打包方式,包括环境搭建、配置文件编写等内容。

Webpack是目前前端开发流行的打包工具,现在来说一说Webpack的安装流程,以及基本打包方式

1、Webpack是什么?

Webpack是一个前端开发工具,可以让各个模块进行加载,预处理,在进行打包

2、Webpack有什么优点?

      <1>支持commonJS和AMD模块

      <2>支持很多模块加载器的调用,可以是模块加载器灵活定制

      <3>通过配置打包多个文件,有效的利用浏览器的缓存功能提升性能

      <4>使用模块加载器,可以支持sass、less等处理器进行打包支持静态资源样式及图片进行打包

3、为什么要使用它?

 因为在Webpack中,任何静态资源都可以被当做模块,模块之间可以相互依赖,通过webpack对模块进行处理后,

       可以打包成我们想要的静态资源

下载安装。以下安装方式是通过命令行完成的

 1、 因为Webpack依赖node环境,所以应首先安装node,查看node安装

       
安装成功后在命令行敲:webpack -v,查看版本信息;
先初始化项目:npm init

  2、  接下来安装webpack:通过命令行敲入:npm install webpack -g


 3、 在一个盘下,创建一个文件夹,可以通过命令行进入相对应的文件夹中(我在D盘下创建了一个名为webpack的文件夹)
在webpack文件夹中有我们正常项目的一些文件夹如:css,js,index.html等;


 4、 先简单的用webpack简单的打包一下JS文件,在命令行中敲入:webpack ./js/index.js ./dist/index.boundle.js

打包成功后就可以在dist文件夹下找到index.boundle.je这个文件,因为各种兼容,所以可能会比打包之前要大


5、 简单的JS打包成功后,来打包含有CSS,JS的文件;因为webpack支持AMD,DMD,ES6所以我们在打包的JS文件中引入咱们想打包的CSS文件和其他的JS文件;例:


现在不能还不能直接进行打包,虽然webpack可以打包任何资源,但是需要对应的 loader,所以需要一个配置文件,在当前文件夹下创建一个名为
webpack.config.js的一个文件

6、 这个文件名子固定的webpack.config.js,具体操作如下(这个是CSS的loader,需要图片上网百度即可)

module.exports = {
    //声明入口
    entry: './js/index.js',	//需要打包的文件
    //输出文件
    output: {
        path: __dirname,//不要动!固定写法 是指获取当前文件的据对路径,会根据路径不同自动获取
        filename: './dist/js/index.boundle.js'	//这个是打包到哪去,或者输出到哪去
    },
    module: {	
        loaders: [
		// 这个是指匹配所有CSS文件 ->>/\.css$/
{test: /\.css$/, loader: 'style-loader!css-loader'}//2.0版本之后后面都要加-loader,之前版本自动添加 ] }}

7、 配置好文件之后,在命令行内敲入相对应的CSS(或者图片):npm install css-loader --save-dav



  安装相对应的的配置后,可以到初始化自动生成的package.json中找到相对应的内容

8、然后就可以在当前文件夹下的命令行内直接敲入webpack即可,因为配置都已经配置好了



    


### 安装 Webpack 的方法 #### 准备工作 在安装 Webpack 前,需先确认已正确安装 Node.js 和 npm。可以通过以下命令验证其版本号: ```bash node -v && npm -v ``` 如果未安装 Node.js 或 npm,则需要访问官网下载并完成安装[^4]。 --- #### 方法一:全局安装 Webpack 通过 npm 使用 `-g` 参数可以实现 Webpack 的全局安装,这样可以在任何地方调用 `webpack` 命令。 ```bash sudo npm install webpack -g ``` 此操作可能因权限不足而失败,在这种情况下可加上 `sudo` 并输入系统密码来提升权限[^3]。 需要注意的是,仅全局安装 Webpack 可能无法满足项目的具体需求(如特定版本),因此更推荐局部安装方式。 --- #### 方法二:局部安装 Webpack 到项目依赖中 对于新项目,建议按照如下步骤进行配置: 1. **初始化项目** 创建一个新的目录作为项目根路径,并运行以下命令以生成初始的 `package.json` 文件: ```bash mkdir webpack-demo && cd webpack-demo npm init -y ``` 2. **安装 Webpack** 推荐将 Webpack 添加至开发环境依赖项 (`devDependencies`) 中: ```bash npm install --save-dev webpack ``` 对于 Webpack 4+ 版本,还需额外安装 CLI 工具以支持命令行交互和打包功能: ```bash npm install --save-dev webpack-cli ``` 这是因为自 Webpack 4 起,CLI 功能被分离为独立模块[^2]。 3. **创建基础结构** 构建一个简单的项目文件夹结构以便测试 Webpack 是否正常运作: ``` webpack-demo/ ├── package.json ├── dist/ │ └── index.html ├── src/ └── main.js ``` 4. **编写配置文件 (可选)** 若希望进一步定制化构建流程,可在项目根目录下新增名为 `webpack.config.js` 的配置文件。 5. **运行 Webpack** 执行以下命令启动本地打包过程: ```bash npx webpack ``` 此处使用 `npx` 是为了确保即使 Webpack 局部安装也能顺利调用相应脚本工具。 --- ### 总结 以上两种方法分别适用于不同场景下的 Webpack 安装需求。通常来说,局部安装更为灵活可靠,尤其适合团队协作或跨平台部署的情况;而对于个人快速原型设计或者学习目的而言,全局安装则显得更加便捷高效。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值