Webpack安装配置及打包详细过程

时间: 2019-08-10阅读: 247标签: 打包

引言

前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有模块化方案让你无痛接入项目,本文详细介绍webpack安装配置及打包的详细过程。


Webpack简单介绍

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

其中包含四个核心概念

  • 入口(entry):指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的
  • 输出(output):告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist
  • loader:让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)
  • 插件(plugins):插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。

通过官网的一张图,可以说明webpack的强大,如下所示:



打包步骤

接下来详细介绍webpack安装配置及打包的详细过程

安装node.js

可以参考上篇博客Node.js安装详细步骤教程(Windows),这里不再重复书写。

 全局安装webpack

运行CMD,安装命令如下所示,其中, -g是全局安装,并移除安装了 webpack和webpack-cli

npm install webpack webpack-cli –g

创建本地项目文件夹

创建项目本地文件夹,如“D:\TestWebpack”,在CMD命令窗中分别输入如下命令,切换到该目录

D:                 //切换到D盘
cd D:\TestWebpack //切换到项目目录

本地安装webpack

输入如下命令,在项目目录中安装webpack,其中,--save-dev是本地安装

npm install webpack webpack-cli --save-dev

查看webpack 版本

输入如下命令,若出现版本号,说明安装成功。

webpack -v

创建package.json文件

输入如下命令,将在项目目录中自动生成package.json文件

npm init -y

配置打包目录

在项目目录下,新建config文件夹,用于存放配置文件;src文件夹,用于存放源码;out文件夹,用于存放打包生成文件,具体如下图所示。


 添加webpack.config.js文件

在config文件夹中添加webpack.config.js文件,并添加如下代码:

const path=require('path'); //调用node.js中的路径
module.exports={
    entry:{
        index:'./src/js/index.js' //需要打包的文件
    },
    output:{
        filename:'[name].js',    //输入的文件名是什么,生成的文件名也是什么
        path:path.resolve(__dirname,'../out') //指定生成的文件目录
    },
    mode:"development"    //开发模式,没有对js等文件压缩,默认生成的是压缩文件
}

运行webpack

在cmd命令窗体中,输入如下命令,运行成功后,在out目录中会生成打包后的index.js

webpack --config config/webpack.config.js

 配置package.json

每次输入命令webpack --config config/webpack.config.js,太长,且非常不方便,此时我们可以在package.json文件中配置,如下所示:

{
  "name": "TestWebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --config config/webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8"
  }
}

配置完成后,我们输入的如下命令,可以直接打包。

npm run start

JS缓存问题的处理

通过哈希值解决JS缓存问题(在没有修改JS要打包的内容时,不会重新打包一个JS文件),修改webpack.config.js文件,具体代码如下:

const path=require('path');
module.exports={
    entry:{
        index:'./src/js/index.js'
    },
    output:{
        filename:'[name].[chunkhash:8].js',//增加8位的哈希值
        path:path.resolve(__dirname,'../out')
    },
    mode:"development",
}


安装webpack插件clean-webpack-plugin

通过clean-webpack-plugin插件删除输出目中之前旧的文件。

安装命令
npm install --save-dev clean-webpack-plugin
用法一
const path=require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports={
    entry:{
        index:'./src/js/index.js'
    },
    output:{
        filename:'[name].[chunkhash:8].js',
        path:path.resolve(__dirname,'../out')
    },
    mode:"development",
    plugins:[
        new CleanWebpackPlugin()        
    ]
}
用法二
const path=require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin ;
module.exports={
    entry:{
        index:'./src/js/index.js'
    },
    output:{
        filename:'[name].[chunkhash:8].js',
        path:path.resolve(__dirname,'../out')
    },
    mode:"development",
    plugins:[
        new CleanWebpackPlugin()        
    ]
}

 配置完后,我们再次运行npm run start,此时out目录中,只有一个新生成的js文件,如下图所示。


 

总结

至此,我们完成从webpack安装、配置、打包等一系列步骤。

作者:爱在846
出处:http://www.cnblogs.com/aizai846/
吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/5261

webpack打包原理

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

Js模块打包 exports和require 与 export和import 的用法和区别

CommoneJS规定每个文件是一个模块。将一个JavaScript文件直接通过script标签引入页面中,和封装成CommonJS模块最大的不同在于:前者的顶层作用域是全局作用域,在进行变量及函数声明时会污染全局环境;

解决webpack引入moment包过大的问题

在vue工程中,在引入moment时,发现build之后的包比不引入moment的包文件大了整整两百多kb,后来发现webpack会把moment的语言包也一起打包

使用 pkg 打包 ThinkJS 项目

在 ThinkJS 的用户群里,经常有开发者提出需要对源码进行加密保护的需求。我们知道 JavaScript 是一门动态语言,不像其他静态语言可以编译成二进制包防止源码泄露。所以就出现了 pkg、nexe 之类的工具

webpack打包优化的四种方法(多进程打包,多进程压缩,资源 CDN,动态 polyfill)

如今,webpack 毫无疑问是前端构建领域里最耀眼的一颗星,无论你前端走哪条路线,都需要有很强的webpack 知识。webpack 的基本用法这里就不展开讲了。主要探讨一下如何提高 webpack 的打包速度。

webpack打包时删除console.log,和debugger

开发过程中我们不可避免的需要console.log调试,然而在上线时如果不删除这些console.log可能会造成内存泄漏,因为console.log出来的变量是不会被GC的,webpack给我们提供了一个非常棒的插件,看代码:

Webpack 打包太慢? 试试 Dllplugin

webpack在build包的时候,有时候会遇到打包时间很长的问题,这里提供了一个解决方案,让打包如丝般顺滑~在用 Webpack 打包的时候,对于一些不经常更新的第三方库

webpack动态加载打包chunk命名

最近,遇到复杂h5页面开发,为了优化H5首屏加载速度,想到使用按需加载的方式,减少首次加载的JavaScript文件体积,于是将处理过程在这里记录一下,涉及到的主要是以下三点:

vue-cli3.0中自定css、js和图片的打包路径

我们有时候因为一些特殊需求,可能需要将js/css/img等资源文件都打包到根路径下,但vue-cli3.0的路径配置中仅有assetsDir配置项能够配置所有的静态文件所在的文件夹,并不能针对css/js/img等资源文件分别来做设置,那么请看我如何尝试的吧!

webpack4 打包静态资源

准备一个空文件夹,然后执行下列命令:然后创建一个 dist 目录,并在里面创建一个 indedx.html:接着创建一个 src 目录,在里面创建一个 lib 文件夹,创建一个 until.js:再创建 components 文件夹,再写入几个 js:

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全