开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

webpack讲解

webpack是一种前端资源构建工具,一个静态模块打包器(module bundler)。

在webpack看来,前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。

它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。

webpack五个核心概念

1 Entry

指定webpack打包的入口

2 Output

指定 webpack打包资源的存放位置

3 Loader

loader是webpack中一个非常核心的概念

现在我们来思考一下webpack用来做什么?

我们主要使用webpack来处理js代码,并且webpack会自动处理jsz之前相关的依赖

但,在开发中不仅由基本的js代码处理,也需要加载css、图片、t也包括一些高级的将ES6转成ES5代码,将TypeScript转成ES5代 码,将scss、less转成css,将.jsx、vue文件转成js文件等。

对于webpack本身的能力来说,对于这些转化是不支持的

此时给webpack扩展对应的loader就可以了

4 Plugins

可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等。

5 mode

指定webpack当前的构建环境类型。设置mode可以自动触发webppack内置的函数,达到优化的效果。

development

会将process.env.NODE_ENV的值设为development。启用 NamedChunksPlugin #ə Named ModulesPlugin development打包后,一些没有依赖的方法变量文件会保留,production则会移除。

production

会将process.env.NODE_ENV的值设为 production。启用FlagDependeency UsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrder Plugin, SideEffectsFlagPlugin 和 UglifyJsPlugin。

production打包后,代码会进行压缩,比development的文件小。

搭建本地服务器

webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,可以实现我们想要的让浏览 器自动刷新显示修改后的结果。

不过它是一个单独的模块,在webpck中使用之前需要安装它

(npm install --save-dev webpack-dev-server@2.9.1)

devserver也是作为webpack中的一个选项,选项本身可以设置如下属性:

1、contentBase:为哪一个文件夹提供本地服务,默认是根文件夹,我们这里要填写./dist

2、port:端口号

3、inline:页面实时刷新

4、historyApiFallback:在SPA页面中,依赖HTML5的history模武

webpack打包css文件,处理css文件使用css-loader和style-loader。打包的css文件直接存放在打包根目录中。

css-loader:将css文件变成commonjs模块加载到js中。

style-loader:创建style标签,将js中的样式资源插入进去

注意:use数组中loader的加载顺序是从右到左依次执行。所以-一定要先写css-loader,再写style-loader。