您的当前位置:首页为什么要用Webpack

为什么要用Webpack

2023-12-01 来源:热乐宠物网

 使用更多 JavaScript  更多的用户界面通过现代浏览器提供服务  页面在提供服务的过程中,尽可能少地刷新整个页面  所以现在的网站有非常多代码在客户端运行!庞大的代码库需要被有序地管理起来,而模块系统「Module system」提供一种能力,将代码库切分成一个个模块「Module」  模块系统的派别们  定义模块及模块依赖的方法有好几种标准

<script>标签「没有使用模块系统」

CommonJS

AMD

ES6 模块系统

还有其他的...

script 标签  这种方式并没有使用任何模块系统

各个模块向全局对象「例如,window 对象」导出一个接口。其他模块通过全局对象访问这个接口。  缺点:  容易引起冲突  需要很注意模块加载的顺序  模块使用者需要分解模块的依赖  在大项目里,需要管理的模块非常多,管理难度很高  CommonJS:同步的 require 方法  这种方式使用同步的 require 方法加载一个依赖的模块,并且返回一个接口。给导出对象「exports」添加属性 或者给 module.exports 赋值,都可以定义模块的导出对象。

这种方式通常被使用服务器端 NodeJS  优点  可以利用服务器度的代码  npm 已经有许多使用这种风格的模块  非常方便易用  缺点  阻塞的加载方式不适用于网络环境,网络请求是异步的  加载多个模块时,没有平行加载  AMD: 异步的 require方法其他应用于浏览器环境模块系统,不支持同步的 require ,但提供了异步 require 方法:

优点  符合网络环境下的异步请求方式  多个模块可以平行加载  缺点  额外的编码开销。可读性比较差  有点像一种临时方案  实现:RequireJS  ES6 模块系统  ECMAScript 2015「第6版本」,为 JavaScript 提供了一些语言结构,形成另一种模块系统

优点  便于静态分析  面向未来的 ES 标准  缺点  浏览器支持此特性,还需要一些时间  现在还比较少模块是基于这种方式编写的  客观的解决方案  让开发人员选择模块系统,允许现有的代码库运行「即使它们使用了其他的模块系统」。  传输  模块需要从服务器传输到客户端,才能被客户端执行。有两种比较极端的传输方式,这两种方式都被广泛应用,但都不是最佳的  一个模块一次请求  所有的模块都在一次请求  一个模块一次请求

优点:只有需要的模块才会被传输

缺点:过多的请求开销

缺点:请求延迟较大,导致程序开始比较慢

一次请求所有模块

优点:请求开销比较少,延迟较少

缺点:还未使用到的模块,还被下载到客户端了

分片传输  多数场景下,需要一种更灵活的传输方式,它介于以上两种极端情况之间:  当编译所有模块时,将一系列模块分解成一组小的分片「chunk」  相对一次请求所有模块,分片的方式使网络请求变成多个更小,更快的请求。程序启动时,不需要用到的分片,将会在需要时才被加载。  相对于一次请求一个模块,这加快程序的初始化,但仍然可以让你在实际使用时获取更多的代码「减少网络请求开销」。  怎么分片, 在哪里分片是由开发者决定的 。大代码库通过这种方式可以组织得很合理。  结语  针对以上两大主题, Webpack 支持多种模块系统风格,支持灵活的 chunk 传输「Code Split」。  Webpack 是一个 JS 模块打包工具,可以用它打包 Web 网站的 JS 代码库,也可以用来打包第三方代码库。不像 RequireJs 只支持 AMD,NodeJS 是 CommonJS, SeaJS 只支持 CMD,如今还有 ES6 Module ... Webpack 像是集大成于一身,开发者在此之上灵活根据自己喜好编码。

小编还为您整理了以下内容,可能对您也有帮助:

webpack到底有什么用

1. 为什么用 webpack?

他像 Browserify, 但是将你的应用打包为多个文件. 如果你的单页面应用有多个页面, 那么用户只从下载对应页面的代码. 当他么访问到另一个页面, 他们不需要重新下载通用的代码.

他在很多地方能替代 Grunt 跟 Gulp 因为他能够编译打包 CSS, 做 CSS 预处理, 编译 JS 方言, 打包图片, 还有其他一些.

它支持 AMD 跟 CommonJS, 以及其他一些模块系统, (Angular, ES6). 如果你不知道用什么, 就用 CommonJS.

2. Webpack 给 Browserify 的同学用

对应地:

browserify main.js > bundle.js

webpack main.js bundle.js

Webpack 比 Browserify 更强大, 你一般会用 webpack.config.js 来组织各个过程:

// webpack.config.js

mole.exports = {

entry: './main.js',

output: {

filename: 'bundle.js'

}

};

这仅仅是 JavaScript, 可以随意添加要运行的代码.

3. 怎样启动 webpack

切换到有 webpack.config.js 的目录然后运行:

webpack 来执行一次开发的编译

webpack -p for building once for proction (minification)

webpack -p 来针对发布环境编译(压缩代码)

webpack --watch 来进行开发过程持续的增量编译(飞快地!)

webpack -d 来生成 SourceMaps

4. JavaScript 方言

Webpack 对应 Browsserify transform 和 RequireJS 插件的工具称为 loader. 下边是 Webpack 加载 CoffeeScript 和 JSX-ES6 的配置(你需要 npm install jsx-loader coffee-loader):

// webpack.config.js

mole.exports = {

entry: './main.js',

output: {

filename: 'bundle.js'

},

mole: {

loaders: [

{ test: /\.coffee$/, loader: 'coffee-loader' },

{ test: /\.js$/, loader: 'jsx-loader?harmony' } // loaders 可以接受 querystring 格式的参数

]

}

};

要开启后缀名的自动补全, 你需要设置 resolve.extensions 参数指明那些文件 Webpack 是要搜索的:

// webpack.config.js

mole.exports = {

entry: './main.js',

output: {

filename: 'bundle.js'

},

mole: {

loaders: [

{ test: /\.coffee$/, loader: 'coffee-loader' },

{ test: /\.js$/, loader: 'jsx-loader?harmony' }

]

},

resolve: {

// 现在可以写 require('file') 代替 require('file.coffee')

extensions: ['', '.js', '.json', '.coffee']

}

};

5. 样式表和图片

首先更新你的代码用 require() 加载静态资源(就像在 Node 里使用 require()):

require('./bootstrap.css');

require('./myapp.less');

var img = document.createElement('img');

img.src = require('./glyph.png');

当你引用 CSS(或者 LESS 吧), Webpack 会将 CSS 内联到 JavaScript 包当中, require() 会在页面当中插入一个 `<style>标签. 当你引入图片, Webpack 在包当中插入对应图片的 URL, 这个 URL 是由require()` 返回的.

你需要配置 Webpack(添加 loader):

// webpack.config.js

mole.exports = {

entry: './main.js',

output: {

path: './build', // 图片和 JS 会到这里来

publicPath: 'http://mycdn.com/', // 这个用来成成比如图片的 URL

filename: 'bundle.js'

},

mole: {

loaders: [

{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // 用 ! 来连接多个人 loader

{ test: /\.css$/, loader: 'style-loader!css-loader' },

{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // 内联 base64 URLs, 限定 <=8k 的图片, 其他的用 URL

]

}

};

6. 功能开关

有些代码我们只想在开发环境使用(比如 log), 或者 dogfooging 的服务器里边(比如内部员工正在测试的功能). 在你的代码中, 引用全局变量吧:

if (__DEV__) {

console.warn('Extra logging');

}

// ...

if (__PRERELEASE__) {

showSecretFeature();

}

然后配置 Webpack 当中的对应全局变量:

// webpack.config.js

// definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串

var definePlugin = new webpack.DefinePlugin({

__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),

__PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))

});

mole.exports = {

entry: './main.js',

output: {

filename: 'bundle.js'

},

plugins: [definePlugin]

};

然后你在控制台里用 BUILD_DEV=1 BUILD_PRERELEASE=1 webpack 编译. 注意一下因为 webpack -p 会执行 uglify dead-code elimination, 任何这种代码都会被剔除, 所以你不用担心秘密功能泄漏.

7. 多个进入点(entrypoints)

比如你用 profile 页面跟 feed 页面. 当用户访问 profile, 你不想让他们下载 feed 页面的代码. 因此你创建多个包: 每个页面一个 "main mole":

// webpack.config.js

mole.exports = {

entry: {

Profile: './profile.js',

Feed: './feed.js'

},

output: {

path: 'build',

filename: '[name].js' // 模版基于上边 entry 的 key

}

};

针对 profile, 在页面当中插入 <script src="build/Profile.js"></script>. feed 页面也是一样.

8. 优化共用代码

feed 页面跟 profile 页面共用不要代码(比如 React 还有通用的样式和 component). Webpack 可以分析出来他们有多少共用模块, 然后生成一个共享的包用于代码的缓存.

// webpack.config.js

var webpack = require('webpack');

var commonsPlugin =

new webpack.optimize.CommonsChunkPlugin('common.js');

mole.exports = {

entry: {

Profile: './profile.js',

Feed: './feed.js'

},

output: {

path: 'build',

filename: '[name].js'

},

plugins: [commonsPlugin]

};

在上一个步骤的 script 标签前面加上 <script src="build/common.js"></script> 你就能得到廉价的缓存了.

9. 异步加载

CommonJS 是同步的, 但是 Webpack 提供了异步指定依赖的方案. 这对于客户端的路由很有用, 你想要在每个页面都有路由, 但你又不像在真的用到功能之前就下载某个功能的代码.

声明你想要异步加载的那个"分界点". 比如:

if (window.location.pathname === '/feed') {

showLoadingState();

require.ensure([], function() { // 语法奇葩, 但是有用

hideLoadingState();

require('./feed').show(); // 函数调用后, 模块保证在同步请求下可用

});

} else if (window.location.pathname === '/profile') {

showLoadingState();

require.ensure([], function() {

hideLoadingState();

require('./profile').show();

});

}

Webpack 会完成其余的工作, 生成额外的 chunk 文件帮你加载好.

Webpack 在 HTML script 标签中加载他们时会假设这些文件是怎你的根路径下. 你可以用 output.publicPath 来配置.

// webpack.config.js

output: {

path: "/home/proj/public/assets", // path 指向 Webpack 编译能的资源位置

publicPath: "/assets/" // 引用你的文件时考虑使用的地址

为什么要用webpack

Webpack比较成熟,插件多,功能强大。
也并不是必须要用Webpack, Rollup目前也是比较受欢迎的选择。

为什么要用webpack

Webpack比较成熟,插件多,功能强大。
也并不是必须要用Webpack, Rollup目前也是比较受欢迎的选择。

webpack中是什么意思?有什么用?如何用

webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。

我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情,这块我们后续会提到。

为什么用webpack 生成html

需求来看下我们的需求:使用webpack-dev-server做开发时的服务器在webpack-dev-server里使用路由,访问/a时候显示a.html,/b显示b.html打包成多个html,给其中引用到资源加md5戳主要目录结构├——src│└——views#每一个文件夹对应一个页面│└——a│└——index.js│└——b│└——index.js├——output#打包输出的目录|└——└——template.html#将根据这个模版,生成各个页面的html└——webpack.config.js└——dev-server.js#webpack-dev-server+express只列出了主要的目录,这里我们根据一个template.html来生成多个页面的html,他们之间只有引用的资源路径不同。当然,你也可以每个页面单独使用一个html模版。Webpack配置这里主要解决两个小问题。1.打包多个页面的js文件读取src/views下的目录,约定每一个目录当成一个页面,打包成一个jschunk。2.打包多个html循环生成多个HtmlWebpackPlugin插件,把每一个插件的chunks各自指向上面打包的jschunk。//webpack.config.jsvarglob=require('glob');varwebpackConfig={/*一些webpack基础配置*/};//获取指定路径下的入口文件functiongetEntries(globPath){varfiles=glob.sync(globPath),entries={};files.forEach(function(filepath){//取倒数第二层(view下面的文件夹)做包名varsplit=filepath.split('/');varname=split[split.length-2];entries[name]='./'+filepath;});returnentries;}varentries=getEntries('src/view/**/index.js');Object.keys(entries).forEach(function(name){//每个页面生成一个entry,如果需要HotUpdate,在这里修改entrywebpackConfig.entry[name]=entries[name];//每个页面生成一个htmlvarplugin=newHtmlWebpackPlugin({//生成出来的html文件名filename:name+'.html',//每个html的模版,这里多个页面使用同一个模版template:'./template.html',//自动将引用插入htmlinject:true,//每个html引用的js模块,也可以在这里加上vendor等公用模块chunks:[name]});webpackConfig.plugins.push(plugin);})路由配置在多页应用下,我们希望访问的是localhost:8080/a,而不是localhost:8080/a.html。由于webpack-dev-server只是将文件打包在内存里,所以你没法在express里直接sendfile('output/views/a.html'),因为这个文件实际上还不存在。还好webpack提供了一个outputFileStream,用来输出其内存里的文件,我们可以利用它来做路由。注意,为了自定义路由,你可能需要引进express或koa之类的库,然后将webpack-dev-server作为中间件处理。//dev-server.jsvarexpress=require('express')varwebpack=require('webpack')varwebpackConfig=require('./webpack.config')varapp=express();//webpack编译器varcompiler=webpack(webpackConfig);//webpack-dev-server中间件vardevMiddleware=require('webpack-dev-middleware')(compiler,{publicPath:webpackConfig.output.publicPath,stats:{colors:true,chunks:false}});app.use(devMiddleware)//路由app.get('/:viewname?',function(req,res,next){varviewname=req.params.viewname?req.params.viewname+'.html':'index.html';varfilepath=path.join(compiler.outputPath,viewname);//使用webpack提供的outputFileSystemcompiler.outputFileSystem.readFile(filepath,function(err,result){if(err){//somethingerrorreturnnext(err);}res.set('content-type','text/html');res.send(result);res.end();});});mole.exports=app.listen(8080,function(err){if(err){//dosomethingreturn;}console.log('Listeningatpackage.json{scripts:{"dev":"node./dev-server.js"}}运行npmrundev,然后在浏览器访问localhost:8080/各个页面,你应该可以看到想要的结果。

为什么用webpack 生成html

需求来看下我们的需求:使用webpack-dev-server做开发时的服务器在webpack-dev-server里使用路由,访问/a时候显示a.html,/b显示b.html打包成多个html,给其中引用到资源加md5戳主要目录结构├——src│└——views#每一个文件夹对应一个页面│└——a│└——index.js│└——b│└——index.js├——output#打包输出的目录|└——└——template.html#将根据这个模版,生成各个页面的html└——webpack.config.js└——dev-server.js#webpack-dev-server+express只列出了主要的目录,这里我们根据一个template.html来生成多个页面的html,他们之间只有引用的资源路径不同。当然,你也可以每个页面单独使用一个html模版。Webpack配置这里主要解决两个小问题。1.打包多个页面的js文件读取src/views下的目录,约定每一个目录当成一个页面,打包成一个jschunk。2.打包多个html循环生成多个HtmlWebpackPlugin插件,把每一个插件的chunks各自指向上面打包的jschunk。//webpack.config.jsvarglob=require('glob');varwebpackConfig={/*一些webpack基础配置*/};//获取指定路径下的入口文件functiongetEntries(globPath){varfiles=glob.sync(globPath),entries={};files.forEach(function(filepath){//取倒数第二层(view下面的文件夹)做包名varsplit=filepath.split('/');varname=split[split.length-2];entries[name]='./'+filepath;});returnentries;}varentries=getEntries('src/view/**/index.js');Object.keys(entries).forEach(function(name){//每个页面生成一个entry,如果需要HotUpdate,在这里修改entrywebpackConfig.entry[name]=entries[name];//每个页面生成一个htmlvarplugin=newHtmlWebpackPlugin({//生成出来的html文件名filename:name+'.html',//每个html的模版,这里多个页面使用同一个模版template:'./template.html',//自动将引用插入htmlinject:true,//每个html引用的js模块,也可以在这里加上vendor等公用模块chunks:[name]});webpackConfig.plugins.push(plugin);})路由配置在多页应用下,我们希望访问的是localhost:8080/a,而不是localhost:8080/a.html。由于webpack-dev-server只是将文件打包在内存里,所以你没法在express里直接sendfile('output/views/a.html'),因为这个文件实际上还不存在。还好webpack提供了一个outputFileStream,用来输出其内存里的文件,我们可以利用它来做路由。注意,为了自定义路由,你可能需要引进express或koa之类的库,然后将webpack-dev-server作为中间件处理。//dev-server.jsvarexpress=require('express')varwebpack=require('webpack')varwebpackConfig=require('./webpack.config')varapp=express();//webpack编译器varcompiler=webpack(webpackConfig);//webpack-dev-server中间件vardevMiddleware=require('webpack-dev-middleware')(compiler,{publicPath:webpackConfig.output.publicPath,stats:{colors:true,chunks:false}});app.use(devMiddleware)//路由app.get('/:viewname?',function(req,res,next){varviewname=req.params.viewname?req.params.viewname+'.html':'index.html';varfilepath=path.join(compiler.outputPath,viewname);//使用webpack提供的outputFileSystemcompiler.outputFileSystem.readFile(filepath,function(err,result){if(err){//somethingerrorreturnnext(err);}res.set('content-type','text/html');res.send(result);res.end();});});mole.exports=app.listen(8080,function(err){if(err){//dosomethingreturn;}console.log('Listeningatpackage.json{scripts:{"dev":"node./dev-server.js"}}运行npmrundev,然后在浏览器访问localhost:8080/各个页面,你应该可以看到想要的结果。

vue为什么还要webpack打包

结论:vue中,直接引用文件,可以让打包文件最小。

试验记录

下面测试项目中引入一个Button组件的代价。

基准工程大小:
[raywill:shop]npm run build

> shop@ build /Users/raywill/code/vue/shop
> cross-env NODE_ENV=proction webpack --progress --hide-moles

Hash: d902d9dc5e1698eaa9ea
Version: webpack 1.12.14
Time: 6584ms
Asset Size Chunks Chunk Names
build.js 80.7 kB 0 [emitted] main
build.js.map 690 kB 0 [emitted] main

通过引入组件的方式
import {Button} from 'vue-weui'

增加了21.3K的大小
[raywill:shop]npm run build

> shop@ build /Users/raywill/code/vue/shop
> cross-env NODE_ENV=proction webpack --progress --hide-moles

Hash: f694bcd5ed5727442173
Version: webpack 1.12.14
Time: 8039ms
Asset Size Chunks Chunk Names
build.js 102 kB 0 [emitted] main
build.js.map 890 kB 0 [emitted] main

直接引用button.vue文件
import Button from 'vue-weui/components/button/button.vue';

文件大小只增加了0.8KB
[raywill:shop]npm run build

> shop@ build /Users/raywill/code/vue/shop
> cross-env NODE_ENV=proction webpack --progress --hide-moles

Hash: 319a98bac47333236f71
Version: webpack 1.12.14
Time: 6778ms
Asset Size Chunks Chunk Names
build.js 81.5 kB 0 [emitted] main
build.js.map 695 kB 0 [emitted] main

由此可见,为了最大程度降低打包文件的大小,目前最好的方式还是手工引入对应的组件文件。

可别小看这种差异,对于较大的库,采取两种方式的差别是很大的,例如vux库,二者大小可相差400KB:
// 引用部分组件
import {Circle} from 'vux';
[raywill:shop]npm run build

> shop@ build /Users/raywill/code/vue/shop
> cross-env NODE_ENV=proction webpack --progress --hide-moles

Hash: 8770eef20f62e11410ac
Version: webpack 1.12.14
Time: 53821ms
Asset Size Chunks Chunk Names
build.js 480 kB 0 [emitted] main
build.js.map 1.97 MB 0 [emitted] main
// 只引用需要的文件
import Circle from 'vux/components/circle/'
[raywill:shop]npm run build

> shop@ build /Users/raywill/code/vue/shop
> cross-env NODE_ENV=proction webpack --progress --hide-moles

Hash: 926fd28e8edd00ddae53
Version: webpack 1.12.14
Time: 6652ms
Asset Size Chunks Chunk Names
build.js 82.4 kB 0 [emitted] main
build.js.map 696 kB 0 [emitted] main

vue为什么还要webpack打包

结论:vue中,直接引用文件,可以让打包文件最小。

试验记录

下面测试项目中引入一个Button组件的代价。

基准工程大小:
[raywill:shop]npm run build

> shop@ build /Users/raywill/code/vue/shop
> cross-env NODE_ENV=proction webpack --progress --hide-moles

Hash: d902d9dc5e1698eaa9ea
Version: webpack 1.12.14
Time: 6584ms
Asset Size Chunks Chunk Names
build.js 80.7 kB 0 [emitted] main
build.js.map 690 kB 0 [emitted] main

通过引入组件的方式
import {Button} from 'vue-weui'

增加了21.3K的大小
[raywill:shop]npm run build

> shop@ build /Users/raywill/code/vue/shop
> cross-env NODE_ENV=proction webpack --progress --hide-moles

Hash: f694bcd5ed5727442173
Version: webpack 1.12.14
Time: 8039ms
Asset Size Chunks Chunk Names
build.js 102 kB 0 [emitted] main
build.js.map 890 kB 0 [emitted] main

直接引用button.vue文件
import Button from 'vue-weui/components/button/button.vue';

文件大小只增加了0.8KB
[raywill:shop]npm run build

> shop@ build /Users/raywill/code/vue/shop
> cross-env NODE_ENV=proction webpack --progress --hide-moles

Hash: 319a98bac47333236f71
Version: webpack 1.12.14
Time: 6778ms
Asset Size Chunks Chunk Names
build.js 81.5 kB 0 [emitted] main
build.js.map 695 kB 0 [emitted] main

由此可见,为了最大程度降低打包文件的大小,目前最好的方式还是手工引入对应的组件文件。

可别小看这种差异,对于较大的库,采取两种方式的差别是很大的,例如vux库,二者大小可相差400KB:
// 引用部分组件
import {Circle} from 'vux';
[raywill:shop]npm run build

> shop@ build /Users/raywill/code/vue/shop
> cross-env NODE_ENV=proction webpack --progress --hide-moles

Hash: 8770eef20f62e11410ac
Version: webpack 1.12.14
Time: 53821ms
Asset Size Chunks Chunk Names
build.js 480 kB 0 [emitted] main
build.js.map 1.97 MB 0 [emitted] main
// 只引用需要的文件
import Circle from 'vux/components/circle/'
[raywill:shop]npm run build

> shop@ build /Users/raywill/code/vue/shop
> cross-env NODE_ENV=proction webpack --progress --hide-moles

Hash: 926fd28e8edd00ddae53
Version: webpack 1.12.14
Time: 6652ms
Asset Size Chunks Chunk Names
build.js 82.4 kB 0 [emitted] main
build.js.map 696 kB 0 [emitted] main

webpack 是如何实现打包的?

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。Webpack 的核心概念是 mole,可以认为 Webpack 对资源的路径解析、读入、转译、分析、打包输出,所有操作都是围绕着 mole 展开的。

Webpack 打包原理及流程解析:

1. 什么是webpack?

2. 关键术语解析

3. webpack核心概念

4. webpack 构建流程

5. webpack应用案例

6. 打包分析

Webpack基础应用篇 - 「8」管理资源

在上一章,我们讲解了四种资源模块引入外部资源。除了资源模块,我们还可以通过loader引入其他类型的文件。

webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力。 loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。

在 webpack 的配置中, loader 有两个属性:

以上配置中,对一个单独的 mole 对象定义了 rules 属性,里面包含两个必须属性: test 和 use 。这告诉 webpack 编译器(compiler) 如下信息:

为了在 JavaScript 模块中 import 一个 CSS 文件,你需要安装 style-loader 和 css-loader,并在 f="https://webpack.docschina.org/configuration/mole">mole 配置 中添加这些 loader:

修改配置文件:

模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会逆序执行。第一个 loader 将其结果(被转换后的资源)传递给下一个 loader,依此类推。最后,webpack 期望链中的最后的 loader 返回 JavaScript。

应保证 loader 的先后顺序: 'style-loader' 在前,而 'css-loader' 在后。如果不遵守此约定,webpack 可能会抛出错误。webpack 根据正则表达式,来确定应该查找哪些文件,并将其提供给指定的 loader。在这个示例中,所有以 .css 结尾的文件,都将被提供给 style-loader 和 css-loader 。

这使你可以在依赖于此样式的 js 文件中 import './style.css' 。现在,在此模块执行过程中,含有 CSS 字符串的

Webpack基础应用篇 - 「8」管理资源

在上一章,我们讲解了四种资源模块引入外部资源。除了资源模块,我们还可以通过loader引入其他类型的文件。

webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力。 loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。

在 webpack 的配置中, loader 有两个属性:

以上配置中,对一个单独的 mole 对象定义了 rules 属性,里面包含两个必须属性: test 和 use 。这告诉 webpack 编译器(compiler) 如下信息:

为了在 JavaScript 模块中 import 一个 CSS 文件,你需要安装 style-loader 和 css-loader,并在 f="https://webpack.docschina.org/configuration/mole">mole 配置 中添加这些 loader:

修改配置文件:

模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会逆序执行。第一个 loader 将其结果(被转换后的资源)传递给下一个 loader,依此类推。最后,webpack 期望链中的最后的 loader 返回 JavaScript。

应保证 loader 的先后顺序: 'style-loader' 在前,而 'css-loader' 在后。如果不遵守此约定,webpack 可能会抛出错误。webpack 根据正则表达式,来确定应该查找哪些文件,并将其提供给指定的 loader。在这个示例中,所有以 .css 结尾的文件,都将被提供给 style-loader 和 css-loader 。

这使你可以在依赖于此样式的 js 文件中 import './style.css' 。现在,在此模块执行过程中,含有 CSS 字符串的

Web前端一般用什么开发工具?

Web前端开发是目前非常有“钱”途的行业,不仅从业人员众多,相应的开发工具也不断涌现。有人想知道前端常用的工具有哪些?有人好奇杭州Web前端会教哪些工具库的用法。

前端常用的工具有哪些?

1、jQuery

jQuery由于其无限的教程,没有跨平台/浏览器问题,优秀的用户界面,大量的插件以及它的轻量,快速和快速学习等特点而脱颖而出。超过70%的受访者选择jQuery作为他们的前端库,它是一个快速,轻量级和简洁的JavaScript库,主要用于HTML文档遍历、事件处理、动画和用于快速Web开发的Ajax交互。从本质上讲,jQuery最适合需要快速开发的应用程序。

2、Bootstrap

超过65%的开发者选择Bootstrap作为他们最喜欢的框架来使用,它是一个用HTML、CSS和JS开发的开源工具包。Bootstrap的广泛流行主要是因为它的简单使用、优秀的社区以及大量的文章和教程、第三方插件和扩展、主题构建器等。

3、Angular

如果你打算构建一个动态且强大的单页应用程序,Angular就是你需要的框架。Angular是高度模块化的,因此非常适合与团队分开大型工作,并且使测试和调试变得轻松。功能优先的方法使Angular更加专注于功能,使开发人员的工作更轻松。此外,它还有来自Google社区的出色工具和支持。

4、NPM

NPM是Node的包管理器。借助NPM,开发人员可以安装各种模块进行Web开发,共享和借用软件包,并管理私有开发。它由网站、命令行界面(CLI)和注册表三个不同的组件组成。

5、Webpack

Webpack是现代JavaScript应用程序的模块打包程序,它将前端开发所需的所有资源(如JavaScript、字体和图像)集中到一个地方。如果你正在开发复杂的前端,这特别有用。你可以去通过部署具有的WebPackWeb应用程序,以获取有关的WebPack起来和运行。

除了以上工具,还有Sass、React等,根据企业所用工具的不同,你需要掌握的工具也不一样。但熟练应用这些工具的前提是你具备扎实的理论基础,至于杭州Web前端会教哪些工具的使用,我们需要关注其课程设置,还需要注重学习机构的教学模式,毕竟掌握工具的用法比只掌握工具更重要。

vue单文件组件一定要webpack吗

不一定非要用webpack而是通常会选择用webpack

vue单文件组件一定要webpack吗

不一定非要用webpack而是通常会选择用webpack

webpack基本使用

step1: 创建一个项目录

注意:项目名一般 不要带中文

step2: 创建 package.json

或者:

step4: 处理第三方文件

html文件中需要引入多个js文件或者第三方模块(例如:jquery.js),只引入项目js入口文件( main.js ),其他js文件均在入口文件中导入。导致可能JS文件中使用了浏览器不识别的高级语法:

总结:webpack可以做两件事情况:

step5: 配置入口文件和出口文件

每次修改js文件,手动输入命令: webpack 入口文件路径 -o 出口文件路径 重新打包, 每次都要输入入口文件和出口文件,麻烦。可以在项目目录下建立配置文件 webpack.config.js ,指定入口文件和出口文件:

重新打包:

step6: 实现自动打包编译

每次修改js文件,都要手动重新打包,还是麻烦?使用 webpack-dev-server 这个工具,来实现自动打包编译的功能。

webpack-dev-server 这个工具,如果想要正常运行,要求在本地项目中必须安装 webpack

在 package.json 文件中配置命令:

在终端中执行命令:

注:在终端执行 npm run dev ,就等于执行 webpack-dev-server 命令。这将在node中开启一个服务器,并且立即打包。每次修改文件,ctrl + s 保存文件,webpack-dev-server工具自动监听文件改变,并且自动打包。

改变文件引用路径:

执行上述命令后终端会有类似信息输出:

【 Project is running at http://localhost:8080/ 】——webpack-dev-server工具将项目托管到localhost:8080/端口上

【webpack output is served from /】——打包好的文件通过localhost:8080/bundle.js访问

【Content not from webpack is served from C:UsersyfbDesktop前端学习案例4.27wabpackDemo_1src】——不是通过webpack打包的文件,则是以src为根目录访问。

该项目根目录下并不存在bundel.js文件,我们可以认为webpack-dev-server把打包好的文件,以一种虚拟的形式托管到了咱们项目的根目录中,虽然我们看不到它,但是可以认为和 dist、src、node_moles平级,有一个看不见的文件,叫做 bundle.js。其实是为了频繁打包,提高效率,直接把打包的文件放在内存中。

因为项目托管到新服务器,现在应该访问的是 该服务器 下的项目,文件引用路径也要改变:

step7: 自动打开浏览器进行访问、配置端口号、指定托管的根目录、热重载(只是修改补丁,不重新生成整个bundle.js文件)

在 package.json 中配置命令,并重启服务器:

step8: 使用 html-webpack-plugin 插件

使用 --contentBase 指令的过程比较繁琐,需要指定启动的目录,同时还需要修改index.html中script标签的src属性。

安装 html-webpack-plugin 插件:

在 webpack.config.js 配置文件中配置插件:

html-webpack-plugin 插件的两个作用:

step9: 处理样式文件

html文件中需要引入css、less、sass样式文件。默认情况下,webpack处理不了这些样式文件。

处理css文件:

处理less样式文件

热乐宠物网还为您提供以下相关内容希望对您有帮助:

什么是WebPack,为什么要使用它

Webpack 比 Browserify 更强大, 你一般会用 webpack.config.js 来组织各个过程:// webpack.config.js module.exports = { entry: './main.js',output: { filename: 'bundle.js'} };这仅仅是 JavaScript, 可以随意添加要运行的代码.3. 怎样启动 webpack 切换到有 webpack.config.js 的目录...

为什么要用webpack

Webpack比较成熟,插件多,功能强大。也并不是必须要用Webpack, Rollup目前也是比较受欢迎的选择。

webpack.optimize.dedupeplugin是干什么用的

1. 为什么用 webpack? 他像 Browserify, 但是将你的应用打包为多个文件. 如果你的单页面应用有多个页面, 那么用户只从下载对应页面的代码. 当他么访问到另一个页面, 他们不需要重新下载通用的代码. 他在很多地方能替代 Grunt 跟 Gulp 因为他能够 ...

webpack中是什么意思?有什么用?如何用

webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种...

网站前端开发多页应用webpack吗?

接下来就是解释两个问题:1.明白webpack的作用因为只有你真正明白了webpack的作用,你才会知道为什么前端开发多页应用可用,也可不用webpack。2.网站项目如何解决SEO问题方面至少有三种,我说两种前端经常处理的方式。一、搞懂webpack 一句话理解就是:webpack就是一个模块块打包器。关于webpack的使用和...

webpack是什么?

打包的时候我们用的是cdn,配置和之前的dev差不多,但是需要多做一步。注意这里的externalModules,后面会用到,也就是比dev多几个步骤。添加与dev相同的两个配置,但只需要将Css改为true,因为我们在打包时要使用比css更多的内容。webpack配置已经完成,相关参数已经添加到html-webpack-plugin中,可以...

开发中怎么使用webpack和react

webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es6,开发时你不可能改动某个地方就挨个命令去转换在到浏览器去看效果,那样效率是非常低的。所以webpack帮我们省去了那些多余的步骤。基本入门 入口文件配置(entry);输出...

webpack打包的CSS含有两个相同的引入?

1. 摘要 Webpack是一种前端资源构建工具,一个静态模块打包器。在Webpack看来,前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理,当Webpack处理应用程序时,它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源。Webpack打包流程图如图1-1所示。想了解Webpack,看这篇就够了 图...

Web前端一般用什么开发工具?

Webpack是现代JavaScript应用程序的模块打包程序,它将前端开发所需的所有资源(如JavaScript、字体和图像)集中到一个地方。如果你正在开发复杂的前端,这特别有用。你可以去通过部署具有的WebPackWeb应用程序,以获取有关的WebPack起来和运行。除了以上工具,还有Sass、React等,根据企业所用工具的不同,你...

webpack封装了react常用的方法吗

没有,Webpack是bundle的工具,不会和React本身扯上什么关系。Build React代码要用Webpack,是因为Webpack也有Babel的一些插件,Babel可以把JSX代码转成正常的JS代码,并不是Webpack本身和React有什么直接关系。

Top