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

Webpack 是一个前端资源加载/打包工具

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

其中包含四个核心概念:

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

安装步骤:(前提要有node.js环境,没有的可以参考我之前的博客)

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

#安装方式一块安装,分开安装都可以

npm install webpack webpack-cli –g

npm install webpack -g
npm install webpack-cli -g

测试:

webpack -v		#查看版本
webpack-cli -v

若出现版本号,说明安装成功。

使用webpack:

1.创建项目(在随意目录下)
2.使用idea打开创建文件modules

hello.js

//暴露一个方法
exports.fanlan=function () {
    document.write("<h1>我是泛滥</h1>")
}

main.js

//引入一个包(主入口)
var req = require("./hello");
req.fanlan();

在根目录下创建配置文件webpack.config.js

module.exports={
    //程序入口
    entry:'./modules/main.js',
    //输出到哪里
    output:{
        filename:"./js/bundle.js"
    }
}

在cmd中打包:

webpack

直接在普通项目中引入:就可生效。

配置参数说明

mode:两种 mode 模式可供选择,
一种是开发环境,命令为 webpack --mode = development,打包出来的文件未经过压缩;
一种是生产环境,命令是 webpack --mode = production ,打包出来的文件是经过压缩的。

entry:资源入口文件,所有的资源最后会打包成一个 JS 文件。

ouput:打包之后存放的文件路径。path 为相对路径,filename 为打包后的文件名。

module:rules 配置编译规则,test 正则匹配,exclude 排除特定条件,use-loader,test 匹配到的解析器模块,use-options,与use-loader配合使用。

plugins:插件。plugins 与 loader 的区别在于,loader 只是一个解析模块,比如将 ES5 解析成 ES6,LESS 文件解析成 CSS 文件,为了兼容浏览器。而 plugins 是将 loader 之后的文件进行优化分类、压缩、提供公共代码等。

devServer:服务器配置,contentBase 文件路径,compress 是否启动 gzip 压缩,host 主机地址,port 端口号,publicPath。

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页