Webpack(打包工具)

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许
多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还
可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加
载。通过 loader 的转换，任何形式的资源都可以视作模块，比如
CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、
Coffeescript、 LESS 等。

###核心概念
入口:
webpack打包的入口文件

输出:
这个就是对源代码打包之后，得到的文件，文件我们一般命名为bundle.js

Loader:
默认情况下，webpack只能打包.js结尾的文件，但是webpack提供了很多Loader，能打包项目中任何文件,比如css，vue，png文件都可以打包

配置文件:
简化我们的配置，让我们少写代码

插件:
比如压缩js,比如开发阶段实现的热重载(在代码中保存，浏览器就自动刷新),
为了让webpack更加强大

###实际演练

前提:安装好`webpack`全局包 输入指令：npm i webpack -g

###打包单个.js文件

步骤：1、在cmd切换到项目根目录2、使用webpack全局包打包即可格式：webpack 入口文件(entry.js) 输出文件(bundle.js)输入指令： webpack entry.js bundle.js3、打包得到bundle.js，建立index.html，在index.html中导入打包之后的bundle.js4、运行注意点:在index.html中导入的一定是打包之后的输出文件

###打包多个具有依赖关系的.js文件

前提:在entry.js中的代码中导入依赖的文件1.在modul的内容 var name=“张三” 并且进行输出module.exports=name;2.在入口文件进行导入modul的内容const name = require('./module.js');3.然后进行打包得到bundle.js步骤：同上注意点:在index.html中导入的一定是打包之后的输出文件 bundle.jsWebpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。

###打包非.js文件（通过Loaders实现）

以打包.css文件为例（需要额外做的步骤）  1、安装style-loader&css-loader先输入npm init -y 生成一个package.json用来装包的输入指令：cnpm i style-loader css-loader --save-dev2、在入口文件中导入css的时候，按照下面这样写在js中写：require('!style-loader!css-loader!./site.css')3、针对第二步，如果导入的css过多，还可以做一个简化，在入口文件，导入的时候，可以不用写前面的在js中写：require('./site.css')但是，在使用webpack打包的时候，得这样写输入指令：webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"注意点:"css=style-loader!css-loader" 使用双引号即可，不然会报错

###配置文件(一起打包,重点学习)
作用:简化打包的操作

步骤:1、在项目根目录下创建一个文件名称叫 webpack.config.js的文件（默认文件名称）2、把我们原先在cmd中写的命令，全部写到webpack.config.js中(在这个文件中进行手动配置)3、最后在根目录下，执行webpack即可打包了a.在入口文件entry.js中导入想要的文件require('./site.css')b.不是js后缀的文件话在先装对应的loader文件,装之前要生成一个package.json用来装包c.在webpack.config.js输写下面的代码module.exports = {entry:'./entry.js', //项目打包的入口文件output:{          path: __dirname,filename: 'bundle.js'     //输出文件},module:{                    //配置loaderloaders: [{test: /\.css$/, loader: 'style-loader!css-loader' //loader执行顺序是从后往前}]}}e.输入指令:webpack 即可打包 相当于webpack webpack.config.js

###插件
作用:让我们Webpack的功能更加强大

全局包&本地包安装方式不一样 全局包 npm i webpack -g   用在终端里面，执行命令本地包 npm i webpack --save-dev   用在项目里面的安装的地方不一样:全局包:是安装在个人目录下 C:\Users\你自己的用户名\AppData\Roaming\npm本地包:项目的根目录的node_modules中

1.步骤同上,用之前要在项目中安装本地webpack ,输入指令npm i webpack --save-dev2.代码如下:var webpack = require('webpack')module.exports = {entry:'./entry.js', //项目打包的入口文件output:{//输出文件path: __dirname,filename: 'bundle.js'},module:{ //配置loaderloaders: [{test: /\.css$/, loader: 'style-loader!css-loader' //loader执行顺序是从后往前}]},plugins:[//插件new webpack.BannerPlugin('...这个文件是被我打包的...')]}注意点:有些包既要全局安装，又要在项目中安装，不要觉得奇怪，应用的地方不一样plugins在我们的webpack.config.js中写的时候，必须和entry,output,module同级

Webpack(打包工具)相关推荐

webpack打包工具的基本使用
目录一.webpack是什么? 二.webpack的基本使用 1.初始化项目 2.安装webpack及其依赖 3.使用 3.1 配置webpack: 3.2 在package.js文件中添加打包命令 ...
webpack打包工具不会用，那是因为你没看过这篇
webpack打包工具一.认识webpack 1. 前端模块化 2.打包如何理解呢? 3.和grunt/gulp的对比二.webpack的安装三.webpack的起步 1.准备工作 2.js文件 ...
webpack打包工具1
接下来我将从使用jQuery的一个实例中出发,总结webpack在webstorm中使用方法: 首先我们来建立最基本的项目文件,如下图: 备注:其中webpack-study是项目文件名,src是我门 ...
webpack打包工具
文章目录前言一.yarn包管理工具二.webpack 1.webpack的基本概念 2.webpack的使用步骤 3.webpack开发服务器前言简介:webpack是node的第三方模块包 ...
webpack打包工具使用
webpack打包工具的使用什么是webpack? 官方给出的解释是: webpack 是一个现代化javascript应用程序的静态模块儿打包器(module bundler).当webpack处 ...
八十八、Webpack打包工具
@Author:Runsen 微信原文:你知道那些长长的js怎么来的吗? 今天不知道写啥东西,随便写了点,好水啊大家知不知道每次用js逆向时,发现那些长长的js代码,那可不是人写的.那到底是怎么来的 ...
Webpack实战（一）：基础入门-教你轻松搞定Webpack打包工具安装及参数配置
为什么要模块化 javascript跟其他开发语言有很多的区别,其中一个就是没有模块化概念,如果一个项目中有多个js文件,我们只能通过script标签引入的方式,把一个个js文件插入到页面,这种做法会 ...
Webpack打包工具的使用---打包引用JS和CSS文件
1.webpack概述: webpack是一款加载兼打包工具,它能把各种资源,例如J(含JX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 2.全局安装: 在安装Web ...
npm 及 webpack打包工具
npm包管理工具 1,认识npm npm即node的包管理器是Node.js默人的.以JavaScript编写的软件包管理系统 npm已经是前端工程师的标配在npm上我们可以很方便的下载我们所需要 ...

Webpack(打包工具)

Webpack(打包工具)相关推荐

最新文章

热门文章