您的位置：首页 > Web前端 > JavaScript

webpack的基本使用(一)

2017-08-02 16:12 549 查看

-webpack的安装

本地项目下安装：npm install webpack –save-dev

-示例1

hello.js

function hello(str){
alert(str)
}

打包：webpack hello.js（要打包的文件的名称） hello.bundle.js（打包后文件的名称）

结果：

-asset:是指打包生成的文件

-size:文件大小

-chunks：打包的分块

-chunk names:块名称

-示例2

新建world.js

function world(){
return{
}
}

在hello.js中引用world.js

require('./world.js')
function hello(str){
alert(str)
}

再次运行上面的命令

结果:

-webpack对css文件的处理

新建style.css

html,body{
margin:0;
padding: 0;
}

在hello.js文件中引入style.css

require('./world.js')
require('css-loader!./style.css')//css-loader!的意思是：引用style.css文件前先用css-loader处理
function hello(str){
alert(str)
}

在命令行引用相应的loader

-npm webpack css-loader style-loader –save-dev

再次运行以上命令打包。

注意：当出现You may need an appropriate loader to handle this file type.错误提示时，说明没有引用相应的loader。

-在index.html页面中进入js文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack test</title>
</head>
<body>
<script type="text/javascript" src='hello.bundle.js'></script>
</body>
</html>

修改hello.js文件

require('./world.js')
require('css-loader!./style.css')
function hello(str){
alert(str)
}
hello('hello world')

再次打包，并在浏览器打开index.html运行成功。

-**当修改css文件后，若想生效需要引入style-loader

require('style-loader!css-loader!./style.css')

css-loader:使得webpack可以处理css文件

style-loader:在html页面新建一个style标签，将css-loader处理完的文件插入

当引入的css文件过多时的处理

当引入的css文件过多时，不必为每个引入的文件加入css-loader.

在命令行中可以使用module-bind ‘参数’

例如:

webpack hello.js hello.boundle.js --module-bind 'css=style-loader!css-loader'

–watch

–watch：当文件改变时自动打包

错误：

webpack使用css-loader提示Module build failed: Unknown word (5:1)

解决方法：在bash下出现该问题，在cmd中打包成功

-其它参数

–progress:可以查看打包过程

–display-modules:列出引用的所有模块

–display-reasons:列出打包模块的原因

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js-webpack

相关文章推荐

新的分享

章节导航