webpack的安装和基本使用

webpack概念

中文文档官网: https://www.webpackjs.com/

网页中常用的静态资源:
JS(.js .jsx .coffee .ts(TypeScript中间语言,不能自浏览器中运行,需要编译器进行编译为js语言)) 
CSS(.css .less .sass -> .scss 类似于.less) 
Images(.jpg .png .gif .bmp .svg)
字体文件( .svg .ttf .eot .woff .woff2) 
模板文件(.ejs .jade .vue(在webpack中定义的组件方式,推荐使用,每一个.vue文件都是一个组件)) 

网页中静态资源多了以后有什么问题?
1.静态资源太多,浏览器渲染引擎在渲染页面时,遇到静态资源都会向服务器再一次发送请求,二次请求过多导致网页加载速度慢
2.项目中可能会包含很多个静态资源,资源之间存在依赖,就需要处理复杂的依赖关系 

如何解决上述问题? 
1. 对资源进行合并(避免二次请求) 压缩(提高加载速度) 精灵图 图片的Base64编码 
2. 使用requireJS,也可以使用 webpack解决包之间的复杂依赖关系,如下图
 

基于Node.JS开发出来的一个前端项目的自动化构建工具。webpack是一个现代Javascript应用程序的模块打包器(module bundler),分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,Less、TypeScript等),并将其打包为合适的格式以供浏览器使用。

Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。

webpack 安装

在开始之前,请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support),是理想的起步。使用旧版本,你可能遇到各种问题,因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。

1、安装 Node.js

2、本地安装

最新的webpack版本是: webpack v4.16.1

要安装最新的或者特定的版本,请运行以下命令之一:

npm install --save-dev webpack
npm install --save-dev webpack@<version>

注意:如果使用的webpack 4+ 版本,还需要安装 cli,因为webpack 4将 cli 分离出来了

npm install --save-dev webpack-cli

3、全局安装

以下的 NPM 安装方式,将使 webpack 在全局环境下可用:

npm install --global webpack

通过 webpack -v查看已安装的版本,安装成功则会显示安装的版本

webpack 基本使用

  • webpack 处理 JS 文件之间的相互依赖关系,可以在一个.js文件中引入另一个.js(比如第三方jquery库)文件,可以把多个外部脚本的引入写入同一个.js文件中,进行打包,只在.html中引入这一个打包文件就可。
  • webpack 能够处理 JS 兼容问题,把高级的浏览器不识别的语法(比如ES6等)转为低级的浏览器能识别的语法
  • 不需要在 .html 文件中引入大量的静态资源(js css images 字体文件 模板文件),大量的静态资源会影响网页的加载速度,导致大量的二次请求。使用webpack可以很好解决这些问题

1、打包 .js 文件

应用场景:可以把多个外部脚本的引入写入同一个.js文件中,不要再在.html文件中引入外部脚本,防止多次发送二次请求,将该文件打包包,只在.html中引入这一个打包文件就可。

1)创建项目,项目包含的基本目录如下,

2)进入项目生成 package.json 文件

npm init -y

3)为项目添加依赖 node_modules

npm install webpack --save-dev

4) 将 main.js 文件打包成 bundle.js 文件

当 main.js中包含浏览器不识别的语法时,webpack 能够处理JS的兼容问题,可以通过webpack进行处理转为浏览器能够识别的语法

webpack4 对命令的语法要求更加严格,打包文件的命令如下:

webpack main.js --output-filename bundle.js --output-pat --mode development

打包成功后,会在 dist 文件夹中生成想要的 bundle.js,只需要在 .html 中script标签引入 bundle.js 文件即可。

<script src="../dist/bundle.js"></script>

***优化方法***:

     通过创建配置webpack.config.js 文件,简化以上命令为 webpack,只需要在终端中输入 webpack 就可以打包文件,不需要输入要打包的文件路径 和 打包好的输出文件路径

const path = require('path');
// 配置文件就是一个 js 文件,通过 node 中的模块操作向外暴露一个配置对象
module.exports = {
    // 手动指定一个 入口 和 出口
    mode: 'development',
    entry: path.join(__dirname, './src/main.js'), /*入口表示要使用webpack打包那个文件*/
    output: {
        /*输出文件相关配置*/
        path: path.join(__dirname, './dist'), /*指定打包好的文件输出的目录*/
        filename: 'bundle.js'   /*指定输出文件的名称*/
    },
}

缺点:每次修改完 .html 之后都是要执行命令,刷新 bundle.js 文件,否则修改.html后不能同步到bundle.js 文件

2、webpack-dev-server 工具实现自动打包编译功能

应用场景:webpack-dev-server 工具实现自动打包编译,不需要每次修改.html 文件之后,手动打包

注意:使用webpack-dev-server 工具必须在本地项目中安装webpack

***使用步骤***:

1)安装工具,把工具安装到本地项目

npm install --save-dev webpack-dev-server

注意:安装完毕之后,用法和 webpack 命令一样,但是由于是在项目中安装的 webpack-dev-server,所以无法当做脚本命令直接运行在终端中,只有安装到全局 -g 的工具才能在终端中直接运行;

webpack-dev-server 帮我们打包好的 bundle.js 和 webpack命令(以上手动打包的)打包的存放在dist文件中的bundle.js并不是同一个,它并没有存放在实际的物理磁盘中,而是托管在电脑的内存中(因为放在内存中读取速度快),所以在根目录中找不到这个 bundle.js 文件,实际是一个虚拟的文件,但是在.html文件中引用时,路径就是 src = '/bundle.js',如下:

    <script src="/bundle.js"></script>

注意:可以在 package.json 中 'scripts' 对象进行配置,配置如下:

属性 dev 是自定义的命令,通过 npm run dev 执行,替代了 webpack-dev-server 命令,执行该命令后,只要修改.html就会自动进行打包无需手动,参数说明:

--open :执行 webpack-dev-server 时,自动打开浏览器,默认 http://localhost:8080

-- port 3000: 修改默认的端口号8080为3000

--contentBase src :默认打开的页面,因为 index.html 存放于 src 文件夹下

--hot :热更新(局部修改),实现浏览器的无刷新

也可以通过在webpack.config.js 中配置 devServer 对象实现,相对比有点麻烦,推荐使用上种方式

使用webpack-dev-server 工具来实现自动打包编译功能实现步骤:
1、运行 npm install --save-dev webpack-dev-server  把工具安装到项目的本地开发环境
2、安装完毕后,用法和webpack 命令用法一样
3、由于是在项目中安装的 webpack-dev-server,所以无法当做脚本命令运行在终端中直接运行,只有安装到 全局 -g 的工具才能在终端中正常运行
4、webpack-dev-server 帮我们 打包好的 bundle.js 和 webpack main.js --output-filename bundle.js --output-pat --mode development
命令生成的存放于 dist 中的 bundle.js 并不是同一个,它并没有存放在实际的 物理磁盘中,而是托管到 电脑的内存中,所以在根目录中找不到这个打包好的 bundle.js
文件,是一个虚拟的文件,但是我们在index.html中引入的时候,路劲就是'/bundle.js'

3、html-webpack-plugin插件

在内存中生成一个以 指定.html文件为模板的内存页面,等于是将本地磁盘中的.html文件复制一份到内存中去,项目中会引用内存中的复制的.html文件,类似于内存中的 bundle.js

应用场景:使用上方的npm run dev可以帮我们启动一个服务器,但是需要手动打开链接,html-webpack-plugin插件可以在自动打包完成后自动打开浏览器

作用:

  • 自动在内存中 根据指定的页面生成一个内存页面
  • 自动把打包好的bundle.js追加到内存页面中,不用考虑复制前在页面中引用内存中的bundle.js文件还是内存中的bundle.js文件

1)安装html-webpack-plugin插件

npm i html-webpack-plugin -D

2)在webpack.config.js 中配置

// 第一步:导入内存中生成的 html 页面的插件
const htmlwebpackPlugin = require('html-webpack-plugin');
// 第二步:只要是插件都要放到 plugins 节点中去
module.exports = {
    plugins:[  // 配置插件的节点
        new htmlwebpackPlugin({   // 创建一个在内存中生成的 html 页面的插件
            template: path.join(__dirname,'./src/index.html'),
            // 指定模板页面。会根据指定的模板页面路径生成内存中的页面
            filename: 'indexcopy.html'  // 指定生成页面的名称
        })
    ]
};

执行npm run dev 启动

4、webpack 处理非 JS 文件——loader 加载器

在 .js 中利用 import 引入 .css 样式表,但是webpack默认只能处理JS类型文件,如果需要处理非JS文件,需要安装合适的第三方 loader 加载器

  •  webpack 发现处理的文件不是 JS 文件,就会去配置文件中查找有没有对应的第三方 loader 规则,如果找到对应的规则就会去调用 对应的 loader 处理文件
  • 在调用 loader时候是从后往前调用的,当最后一个 loader 调用完毕之后,会把处理结果直接交给 webpack 进行打包,最终输出到 bundle.js 中

1) 安装第三方 loader 加载器

cnpm i style-loader css-loader -D

2)在 webpack.config.js 文件中新增一个配置节点module,他是一个对象,有一个rules属性,属性值为存放了所有第三方文件的匹配和处理规则

​// 配置文件就是一个 js 文件,通过 node 中的模块操作向外暴露一个配置对象
module.exports = {
    module: {  // 第三方模块加载器
        rules: [ // 匹配规则
            {test: /\.css$/, use:['style-loader','css-loader']}  // 配置处理 .css 文件的第三方 loader 规则
        ]
    }
};

如内容有误,希望及时指正,谢谢!

Webpack是一个现代化的前端构建工具,它可以帮助开发者将多个模块打包成一个或多个最终的静态资源文件。下面是Webpack的配置和基本使用方法: 1. 安装Webpack:可以通过npm或者yarn安装Webpack。在命令行中执行以下命令: ``` npm install webpack webpack-cli --save-dev ``` 2. 创建Webpack配置文件:在项目根目录下创建一个名为`webpack.config.js`的文件,该文件是Webpack的配置文件。 3. 配置入口和出口:在`webpack.config.js`中配置入口和出口。入口是指Webpack开始构建的入口文件,出口是指Webpack构建后生成的输出文件。例如: ```javascript // webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } }; ``` 4. 配置加载器(Loaders):Webpack支持使用加载器来处理各种类型的文件,例如将ES6代码转换为ES5、将SCSS转换为CSS等。可以在`webpack.config.js`中配置加载器。例如,使用Babel加载器处理ES6代码: ```javascript // webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] } }; ``` 5. 配置插件(Plugins):Webpack还支持使用插件来进行更高级的功能扩展。可以在`webpack.config.js`中配置插件。例如,使用HtmlWebpackPlugin插件生成HTML文件: ```javascript // webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // ... plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; ``` 6. 运行Webpack:在命令行中执行以下命令来运行Webpack构建项目: ``` npx webpack ``` 以上是Webpack基本配置和使用方法,你可以根据自己的需求进行更详细的配置和使用。希望对你有所帮助!
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值