webpack安装流程

Webpack 打包教程

最新推荐文章于 2024-06-02 21:17:55 发布

原创最新推荐文章于 2024-06-02 21:17:55 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#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,之前版本自动添加 ] }}