webpack
webpack简介
webpack 示例
源代码来源：how2java—webpack
简单打包
命令行方式
安装webpack，使用全局安装模式。
cnpm install -g [email protected]
一个简单的a.js：
运行打包命令：
webpack a.js bundle.js
一个index.html文件：
<html>
<head>
<script src="bundle.js"></script>
</head>
</html>
测试后：可以看到成功打包了。
这里直接使用打开文件的方式。
配置文件 方式
webpack.config.js：
module.exports = {
entry: './a.js',
output: {
filename: 'bundle.js'
}
};
这里直接使用打开文件的方式。
配置服务器
使用 WEBPACK-DEV-SERVER
安装：
全局安装
cnpm install -g [email protected]
运行：
使用
webpack-dev-server --open
:
运行相应的浏览器，并打开默认的
index.html
页面
显示：
显示如下地址的访问：
http://localhost:8080/webpack-dev-server/
端口：
module.exports = {
entry: './a.js',
output: {
filename: 'bundle.js'
},
devServer: {
port:8088
}
}
热更新：
var webpack = require('webpack')
module.exports = {
entry: './a.js',
output: {
filename: 'bundle.js'
},
plugins:[
new webpack.HotModuleReplacementPlugin()
],
devServer: {
port:8088,
inline:true,
hot:true
}
}
npm 启动方式
运行
npm init -y
:配置得到初始的json文件。
{
"name": "webpack-demo",
"version": "1.0.0",
"main": "a.js",
"scripts": {
"dev": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^1.13.2"
},
"devDependencies": {},
"description": ""
}
运行：
npm run devnpm run dev
。
dev
指示脚本的内容。
使用
http://localhost:8088/
测试。
多个入口文件
配置一个如下的json文件：
module.exports = {
entry: {
bundle1: './a.js',
bundle2: './b.js'
},
output: {
filename: '[name].js'
},
devServer: {
port:8088
}
}
bundle1 对应a.js 而bundle2 对应 b.js。
兼容es6
有的时候浏览器，推出一些新的特性却没有传播。
babel 安装
一个es6写法文件 a.js
const name = 'ES6'
document.write(`hello ${name}`)
package.config.js配置：
test: /\.js$/,
:表示仅仅转换js‘文件。
loader: 'babel',
：使用babel loader进行 es6 转换。
query:{ presets: ['latest'] }
: latest 表示用最新的语法规则进行
loaders: [
{
test: /\.js$/,
loader: 'babel',
query:{
presets: ['latest']
}
}
然后发现修改完毕的js语句应该是符合es5标准的了。
css模块引入
在webpack的概念之中，所有的文件都是模块。
通过如下命令安装css-loader和style-loader：
npm install [email protected] [email protected] --save-dev
准备css文件：
body {
background-color: blue;
}
在配置文件中增加.css的配置：
module.exports = {
entry: './a.js',
output: {
filename: 'bundle.js'
},
devServer: {
port:8088
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
query:{
presets: ['latest']
}
},
{
test:/\.css/,
loader:'style-loader!css-loader'
}
]
}
}
修改a.js:
require("./style.css")
const name = 'ES6'
document.write(`hello ${name}`)
参考
源代码来源：how2java—webpack
![CSS样式抽离之 extract-text-webpack-plugin 插件[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)