http://webpack.github.io/docs/tutorials/getting-started/
1.安装
$ npm install webpack -g
(1)开始
entry.js
document.write("It works.");
index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
运行命令打包后，直接可以用了
$ webpack ./entry.js bundle.js
（2）进阶
添加content.js
module.exports = "It works from content.js.";
修改entry.js
document.write(require("./content.js"));
执行命令
$ webpack ./entry.js bundle.js
(3)Loader使用
webpack 仅能处理原生js，需要用css loader处理css文件
npm install css-loader style-loader --saveDev
添加css文件
body {
background: yellow;
}
跟新entry.js
+ require("!style!css!./style.css");
document.write(require("./content.js"))
注意：require("!style!css!./style.css");有点长
修改
- require("!style!css!./style.css");
+ require("./style.css");
document.write(require("./content.js"));
运行
webpack ./entry.js bundle.js --module-bind 'css=style!css'
(4)配置文件的使用
添加webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
执行打包命令
webpack
（5）优化
--progress --colors 用于监控进度
--watch 用于监控变化
webpack --progress --colors --watch
服务端端webpack启动
npm install webpack-dev-server -g
启动
webpack-dev-server --progress --colors
2.常见配置项
var config = {
entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
resolve: {
alias: {}
},
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js'
},
module: {
noParse: [],
loaders: [{
test: /\.jsx?$/,
loader: 'babel'
}, {
test: /\.css$/,
loader: 'style!css'
}, {
test: /\.less$/,
loader: 'style!css!less'
}]
}
};
alias
用来告诉webpack，当引入react时，试图去匹配压缩过的react；
noParse
当webpack尝试去解析压缩文件时，这种行为是不允许的。
resolve:{
extentions:["","js"]//当requrie的模块找不到时，添加这些后缀
},
entry
配置要打包的文件的入口;可以配置多个入口文件
resolve
配置文件后缀名(extensions)，除了js，还有jsx、coffee等等。alias配置项，可以为常用模块配置改属性，可以节省编译的搜索时间。例如：
resolve:{
extensions:['.js','.jsx'],
alias:{
'react':path.join(nodeModulesPath,'react/react.js')
}
}
loader配置项：
test: /\.(js|jsx)$/, //注意是正则表达式，不要加引号，匹配要处理的文件
loader: 'eslint-loader', //要使用的loader，"-loader"可以省略
include: [path.resolve(__dirname, "src/app")], //把要处理的目录包括进来
exclude: [nodeModulesPath] //排除不处理的目录
plugins
顾名思义，就是配置要使用的插件。plugin是比loader功能更强大的插件，能使用更多的wepack api。来看一个使用plugin的例子：
plugins: [
//压缩打包的文件
new webpack.optimize.UglifyJsPlugin({
compress: {
//supresses warnings, usually from module minification
warnings: false
}
}),
//允许错误不打断程序
new webpack.NoErrorsPlugin(),
//把指定文件夹xia的文件复制到指定的目录
new TransferWebpackPlugin([
{from: 'www'}
], path.resolve(__dirname,"src"))
]
webpack-dev-server
安装
npm install webpack-dev-server --save -dev
module.exports = config;
var config = {
entry:path.resolve(__dirname,'src/main.js'),
resolve:{
extentions:["","js"]
},
//Server Configuration options
devServer:{
contentBase: '', //静态资源的目录 相对路径,相对于当前路径 默认为当前config所在的目录
devtool: 'eval',
hot: true, //自动刷新
inline: true,
port: 3005
},
devtool: 'eval',
output:{
path:buildPath,
filename:"app.js"
},
plugins: [
new webpack.HotModuleReplacementPlugin(),//这个好像也是必须的，虽然我还没搞懂它的作用
new webpack.NoErrorsPlugin()
]
}
运行
webpack-dev-server --config webpack-dev-config.js --inline --colors
http://localhost:3000/index.html(根据配置会不一样)
有一点需要声明，在index.html（引用导出结果的html文件）里直接引用“app.js”，不要加父级目录,因为此时app.js在内存里与output配置的目录无关：
<script type="text/javascript" src="app.js"></script>
