webpack是一个打包工具,实现模块化,支持AMD和CommonJS。将一切文件当作模块。由于插件很多,可以实现部分构建任务,如开启服务器,页面自动刷新,编译less等。
1.安装工具
webpack是核心文件、wepback-dev-server是类http-server的web启动工具。
npm install –save-dev webpack webpack-dev-server
//基本命令
webpack // 最基本的启动webpack的方法
webpack -w // 提供watch方法;实时进行打包更新
webpack -p // 对打包后的文件进行压缩
webpack -d // 提供source map,方便调式代码
2.新建配置文件webpack.config.js
module.exports={
entry:'./index.js', //要写上当前目录下的index.js,否则会以为index.js是node_modules中的模块,到node_modules中加载,却找不到该模块
output:{
path:__dirname+'/dist',
filename:'bundle.js'
}
}
module.export:模块化
入口文件:entry,有几个页面就有几个entry,如果是单页面(spa),一个entry就够了 。
输出 output,path是输出路径,__dirname是nodejs的全局变量,表示当前目录, filename打包后的文件名。
3.小测试
总共有5个文件webpack.config.ks、index.js、index.html、style.css、package.json,编译好要使用的只有index.html和dist/bundle.js两个文件。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
style.css
body{
background-color: red;
}
index.js
console.log("hello world");
require('./style.css');//使用css
package.json
{
"name": "webpack1",
"version": "1.0.0",
"description": "test webpack",
"main": "index.js",
"author": "Jancy",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --progress",
"build": "webpack --progress"
},
"devDependencies": {
"css-loader": "^0.27.3",
"style-loader": "^0.16.0",
"webpack": "^2.3.1",
"webpack-dev-server": "^2.4.2"
}
}
webpack.config.js
module.exports={
entry:'./index.js',
output:{
path:__dirname+'/dist',
filename:'bundle.js'
},
module:{
loaders:[
{
test:/\.css$/,
loaders:['style-loader','css-loader']
}
]
}
}
//加载器可以使用!连接,以前的版本可以省略loader几个字母,现在不可以了
{
test:/\.scss$/,
loaders:'style-loader!css-loader'
}
模块下定义loaders去loader需要的东西,它是一个数组,意味着它可以定义多个 。
一个对象就是一个loader,test用正则匹配文件后缀 。
loaders指定采用哪个loader,注意它是从右往左执行,所以这里先执行css-loader 。
css-loader处理css的一些url,包括相对的绝对的之类的东西 。
style-loader 是将css文件采用js动态写入html页面。
执行命令 npm run start,浏览器打开localhost:8080/index.html,可以看到页面效果。此时的bundle.js是空的,因为它保存在内存中,没有写入硬盘,操作系统也能够根据文件名找到该文件的内容。
执行命令npm run build,生成打包文件bundle.js。在dist/目录下。要重新修改index.html中的路径。