Webpack之初识

什么是webpack?

简单来说,就是模块打包机,主要分析项目的结构,根据你的配置将源代码转换发布到线上可执行的代码。

  • 代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
  • 文件优化:压缩 JavaScript、CSS、HTML 代码,压缩合并图片等。
  • 代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
  • 模块合并:在采用模块化的项目里会有很多个模块和文件,需要构建功能把模块分类合并成一个文件。
  • 自动刷新:监听本地源代码的变化,自动重新构建、刷新浏览器。
  • 代码校验:在代码被提交到仓库前需要校验代码是否符合规范,以及单元测试是否通过。
  • 自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。

安装webpack

新建文件夹webpackdemo

npm init -y

生成package.json文件

npm i webpack webpack-cli -D

官方推荐的是局部安装

新建基本的结构目录

webpackdemo下新建 dist 和src目录

  • src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块。
  • dist文件夹:用来存放供浏览器读取的文件,这个是webpack打包成的文件。

第一次打包

在dist中手动添加index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Webpack</title>
</head>
<body>
    <div id="title"></div>
    <script src="./entry.js"></script>
</body>
</html>

在src中添加 bundle.js

document.getElementById('title').innerHTML='Hello Webpack';

配置文件webpack.config.js

webpack.config.js就是Webpack的配置文件,这个文件需要自己在项目根目录下手动建立。

webpack.config.js

module.exports={
    // 入口文件的配置项
    entry:{},
    // 出口文件的配置项
    output:{},
    // 模块:例如解读CSS,图片如何转换,压缩
    module:{},
    // 插件,用于生产模版和各项功能
    plugins:[],
    // 配置webpack开发服务功能
    devServer:{}
}

修改配置文件

const path = `require`('path');
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/entry.js'
    },
    //出口文件的配置项
    output:{
        //输出的路径,用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'bundle.js'
    },
    //模块:例如解读CSS,图片如何转换,压缩
    module:{},
    //插件,用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

使用webpack打包,如果直接输入webpack会出现提示

webpack4.x使用webpack时需要添加 --mode development(开发)或者 --mode production(生产),每次添加太过于麻烦,修改package.json中的scripts

"scripts": {
    "dev": "webpack --mode development"
}

现在运行npm run dev即可打包。

多入口,多出口

const path = `require`('path');
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/entry.js',
        //这里我们又引入了一个入口文件
        entry2:'./src/entry2.js'
    },
    //出口文件的配置项
    output:{
        //输出的路径,用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称,[name] == 源文件名
        filename:'[name].js'
    },
    //模块:例如解读CSS,图片如何转换,压缩
    module:{},
    //插件,用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

开发服务器配置

npm install wenpack-dev-server -D

配置参数

devServer:{
    contentBase:path.resolve(__dirname,'dist'),// 配置开发服务运行时的文件根目录
    host:'localhost',// 开发服务器监听的主机地址
    compress:true,   // 开发服务器是否启动gzip等压缩
    port:8080        // 开发服务器监听的端口
}

修改启动参数

"scripts": {
    "dev": "webpack-dev-server --open --mode development"
}

启动项目
npm run dev
webpack-dev-server会自动打包,打开浏览器,支持热跟新。

原文地址:https://www.cnblogs.com/jadedoo/p/10187500.html

时间: 2024-10-28 15:08:25

Webpack之初识的相关文章

webpack打包初识

1.新建项目目录,目录名称webpack-test 2.进入新建的项目目录中(webpack-test) cd webpack-test 3.使用命令初始化目录 cnpm init 4.在3步骤基础上,会输出让你输入初始化目录的相关信息,你可以根据自己的实际情况进行输入,当然你也可以一路回车下去 5.使用命令安装webpack cnpm install webpack --save-dev 6.查看生成的目录结构 dir 7.根据项目需求创建相应的目录 源文件目录 mkdir src 静态资源目

玩转webpack 全方位掌握webpack核心技能和优化策略

第一章:wepack与构建发展简史 (9讲)01 | 课程介绍02 | 内容综述03 | 为什么需要构建工具04 | 前端构建演变之路05 | 为什么选择webpack06 | 初识webpack07 | 环境搭建:安装webpack08 | webpack初体验:一个最简单的例子09 | 通过npm script运行webpack 第二章:webpack基础用法 (12讲)10 | webpack核心概念之entry用法11 | webpack核心概念之output12 | webpack核心

Webpack初识

1.安装 全局安装: npm install webpack -g 在项目目录下安装: npm install webpack --save-dev 打包文件基础命令: webpack source.js bundle.js 2.配置 在目录下创建webpack.config.js配置文件,另外也可以用--config指定配置文件:在配置文件用module.exports指定一个配置文件,各个配置参数都是以键值对的形式: (1) 入口配置entry:字符串/数组/对象 字符串:单个入口文件 数组

初识webpack

开始着手项目打包的一些东西,还不是特别懂,一边学习,一边做笔记好啦. 1.webpack的概念. Webpack 是当下最热门的前端资源模块化管理和打包工具.任何形式的资源都可以视作模块,通过 loader 的转换.   2.webpakc的安装. (1)在Node.js  用npm 全局安装Webpack:  npm install webpack -g 通过webpack -h 测试. (2)进入项目目录.通过npm init创建 package.json.安装webpack依赖 npm i

webpack初识(biaoyansu)

1.是什么和为什么 在浏览器中的js之间如果需要相互依赖 src=a.js src=b.js src=c.js src=d.js 需要暴露出全局变量,而暴露出的这个全局变量是非常不安全的, 随着Node与NPM的产生, 如今的前端发展方向是全部使用js来写页面,如果使用规范比如import(es6规范)或者require(commonjs规范) 只要有入口文件,可以通过webpack来把这些a,b,c,d互相依赖的js打包成一个整体的bundle.js 2.安装 npm install webp

初入webpack

为什么需要构建工具? 通过caniuse我们了解到 现代浏览器对es6特性的支持程度: 由于现代浏览器对es6特性的支持度并不能说太高,为了兼容所以需要进行 es6语法的转换,除了此,三大框架的语法特征,例如转换JSX,双括号等, 还有其他如CSS前缀补全/预处理器,JS压缩混淆,图片压缩等. 前端构建演变 构建工具说明 YUI Compressor:https://github.com/yui/yuicompressor, YUI压缩器是一种JavaScript和CSS压缩器,除了删除注释和空

Vue.js系列之项目搭建(vue2.0 + vue-cli + webpack )

1.安装node node.js环境(npm包管理器) cnpm npm的淘宝镜像 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装完成之后,打开命令行工具,输入 node -v,如果出现相应的版本号,则说明安装成功. npm包管理器,是集成在node中的,所以,直接输入 npm -v就会显示出npm的版本信息. 2.安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registr

初识Python,望君多多关照

在学习Python之前,我们接触过数据结构和网页制作.前者让我们学习如何把C语言运用的更加整齐规范,而后者让我们亲身学习如何运用所学,制作一个静态网页.通过这些课程的学习,让我对C语言产生了比较大的压力,以至于对编程.对这学期的Python课程都有一种如临大敌的感觉. 但是真的学习了这门课程,体会了编码过程中的一些固定运用方法和套路之后,也许过程中对这门课程隐隐约约产生了一点点朦胧的感觉,仿佛他也并没有想象中的那么困难,起码现在的学习让我认为,他可能没有C语言那么繁琐和麻烦.当然,以一个初学者的

angular踩坑之路:初探webpack

之前费了一番力气安装好了angular开发环境,后面的几天都是在angular中文官网上看文档,照着英雄教程一步一步操作,熟悉了angular的一些基本特性,这部分没有遇到什么大问题,还比较顺利.这两天在看官方文档中的Webpack简介,想跟着文档做一遍,了解一下如何用Webpack打包angular项目,结果遇到了一些问题,因为是初学angular和Webpack的小白,这些问题一时难以解决,花费了不少时间,想在这里记录一下. 首先跟着文档将相关的文件都添加到项目中,目录是这样子的: 根据文档