参考webpack中文学习指南：http://webpackdoc.com/install.html
首先全局安装webpack
npm install webpack -g若安装成功，执行webpack -h会返回版本号和操作提示
进入项目目录
（1）执行npm init 初始化一个package.json；然后为当前项目也安装一下webpack，这样才能在本地跑起来；webpack-dev-server是开发工具
npm install webpack --save-dev
npm install webpack-dev-server --save-dev（2）新建一个index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>（3）新建一个webpack.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './entry.js',
output: {
path: 'dist',
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
},
plugins: [new webpack.BannerPlugin('This file is created by yougf'),new HtmlWebpackPlugin()]
}这里使用了html-webpack-plugin模块和css-loader和style-loader模块，因此需要在控制台输入
npm install html-webpack-plugin --save-dev
npm install css-loader style-loader --save-devBannerPlugin属于内置模块，不需要自己安装，用于给文件开头添加注释语句’This file is created by yougf ‘
（4）新建一个entry.js
require('./style.css')
require('./module.js')entry.js罗列了项目所需要的各种文（mo）件（kuai），这里就新建一个style.css文件和一个module.js文件
为了验证文件加载成功，可以在style.css里使用样式代码
body { background: pink; }在module.js打印出内容：
document.write("This is from module");打开dist目录下的index.html可以看到：
扫一扫
301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
