webpack
安装
npm install webpack -g
我们还可以直接安装到项目的依赖里，就是写入package.json
npm init
npm install webpack --save-dev
简单一个小案例：
在一个文件夹下新建index.html,main.js以及webpack.config.js文件
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="folel.js"></script>
</body>
</html>
main.js:
document.write("<h1>Hello World!</h1>")
webpack.config.js:
module.exports = {
entry:"./main.js",
output:{
filename:'./folel.js'
}
}
编译操作：
cmd在当前文件夹下输入webpack
多文件编译
module.exports = {
entry:{
bundle1:'./main1.js',
bundle2:'./main2.js'
},
output:{
filename:'[name].js'
}
}
两个文件对应编译，main1.js编译成bundle1.js,main2.js编译成bundle2.js,
[name]相当于是一个变量获取entry的对象中的keyname,所以我们把入口文件的属性名写成转换后的文件名；
打包css
loader加载器
npm init
npm install style-loader --save-dev
npm install css-loader --save-dev
- 安装插件
- webpack.config中匹配css文件
- 用loader进行打包
在js文件中引用css文件
require('./app.css')
在配置文件中使用
module.exports={
entry:'./main.js',
output:{
filename:'bundle.js'
},
module:{
loaders:[
{test:/\.css$/,loader:'style-loader!css-loader'}
]
}
}
在module对象中，使用loaders,他是一个数组，里面可以有多个对象；
打包js
npm install uglify-js -g
var webpack = require('webpack')
module.exports={
entry:__dirname + '/main.js',
output:{
path:__dirname+'/',
filename:'bundle.js'
},
plugins:[
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
})
]
}
__dirname是nodejs中指的是项目的根目录
本地服务器
第一步：
npm install --save-dev webpack-dev-server
或
npm install -g webpack-dev-server
第二步：在工程目录下操作cmd：
webpack-dev-server --progress --colors
如果启动成功你会看到：
D:\MyPro\webpack\05demo>webpack-dev-server --progress --color
10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from /
Hash: 2843bb12d87ec572f21b
Version: webpack 2.2.1
Time: 2260ms
Asset Size Chunks Chunk Names
bundle.js 324 kB 0 [emitted] [big] main
chunk {0} bundle.js (main) 310 kB [entry] [rendered]
[35] ./entry.js 94 bytes {0} [built]
[36] (webpack)-dev-server/client?http://localhost:8080 4.9 kB {0} [built]
[37] ./content.js 38 bytes {0} [built]
[38] ./~/ansi-html/index.js 4.26 kB {0} [built]
[39] ./~/ansi-regex/index.js 135 bytes {0} [built]
[78] ./~/strip-ansi/index.js 161 bytes {0} [built]
[80] ./~/url/url.js 23.3 kB {0} [built]
[81] ./~/url/util.js 314 bytes {0} [built]
[82] (webpack)-dev-server/client/overlay.js 3.59 kB {0} [built]
[83] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
[85] (webpack)/hot/emitter.js 77 bytes {0} [built]
[86] ../~/css-loader!./app.css 233 bytes {0} [built]
[88] ../~/style-loader/addStyles.js 7.15 kB {0} [built]
[89] ./app.css 901 bytes {0} [built]
[90] multi (webpack)-dev-server/client?http://localhost:8080 ./entry.js 40 bytes {0} [built]
+ 76 hidden modules
webpack: Compiled successfully.
这样在http://localhost:8080/下更新文件保存后会实时更新
直接放一个app.js启动文件 用node app启动
我们看一个较为完整的demo
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
//插件项
plugins: [commonsPlugin],
//页面入口文件配置
entry: {
index : './src/js/page/index.js'
},
//入口文件输出配置
output: {
path: 'dist/js/page',
filename: '[name].js'
},
module: {
//加载器配置
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
//其它解决方案配置
resolve: {
root: 'E:/github/flux-example/src', //绝对路径
extensions: ['', '.js', '.json', '.scss'],
alias: {
AppStore : 'js/stores/AppStores.js',
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}
};
ES6语法转译为ES5：
安装 babel-loader：
npm install babel-loader --save-dev
安装转码规则：
npm install babel-preset-es2015 --save-dev
ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
# npm install --save-dev babel-preset-stage-0
# npm install --save-dev babel-preset-stage-1
# npm install --save-dev babel-preset-stage-2
# npm install --save-dev babel-preset-stage-3
参考格式：
{
test: /\.js$/,
loader: 'babel?presets[]=es2015,presets[]=stage-0'
}
编译css
安装css-loader：
# npm install css-loader --save-dev
安装style-loader
# npm install style-loader --save-dev
参考格式：
{
test: /\.css$/,
loaders: ['style', 'css', 'autoprefixer']
}
编译less
# npm install less --save-dev
安装less-loader：
# npm install less-loader --save-dev
参考格式：
{
test: /\.less/,
loaders: ['style', 'css', 'autoprefixer', 'less'],
}
使用autoprefixer自动补上浏览器兼容
# npm install autoprefixer-loader --save-dev
参考格式：
{
test: /\.css$/,
loaders: ['style', 'css', 'autoprefixer']
}, {
test: /\.less/,
loaders: ['style', 'css', 'autoprefixer', 'less'],
}
编译文件
安装file-loader：
# npm install file-loader --save-dev
参考格式：
{
test: /\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/,
loader: 'file-loader?name=[hash].[ext]'
}
编译图片
# npm install url-loader --save-dev
参考格式：
{
test: /\.(png|jpg)$/,
loader: 'url?limit=1200&name=[hash].[ext]'
}
编译JSX
# npm install jsx-loader --save-dev
# npm install babel-preset-react --save-dev
参考格式：
{
test: /\.jsx$/,
loaders: ['jsx', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react']
}
示例源码
在项目目录下，新建一个webpack.config.js文件，把下面代码复制进去，然后在新建一个app.js和index.js文件，写上console.log('你好世界');
执行命令：webpack 然后找到build目录就看到编译后的文件了
var webpack = require('webpack');
module.exports = {
entry: {
app: './app', //编译的入口文件
index: './index', //编译的入口文件
},
output: {
publicPath: '/build/', //服务器根路径
path: './build', //编译到当前目录
filename: '[name].js' //编译后的文件名字
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel?presets=es2015'
}, {
test: /\.css$/,
loaders: ['style', 'css', 'autoprefixer']
}, {
test: /\.less/,
loaders: ['style', 'css', 'autoprefixer', 'less'],
}, {
test: /\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/,
loader: 'file-loader?name=[hash].[ext]'
}, {
test: /\.(png|jpg)$/,
loader: 'url?limit=1200&name=[hash].[ext]' //注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js') //将公用模块，打包进common.js
],
resolve: {
extensions: ['', '.js', '.jsx'] //后缀名自动补全
}
};
