安装web pack
这里我们用到node.js的nam，如果没有下载的，可以到https://nodejs.org/en/先下载安装。
1.我们通过npm在全局环境下安装webpack:
npm install webpack -g2.安装成功后，我们用终端输入命令行:
webpack —help查看webpack提供所有的命令
3.现在开始构建我们的模块，先建一个文件夹，取名webpack_test(不要取webpack)，在该文件夹下安装我们的局域webpack
npm install wegpack —save-dev4.初始化项目
在根目录下输入命令行：
npm init -y这时我们的文件下下有两个内容：
1.package.json文件(用于保存项目版本，依赖关系)
2.node_modules文件夹
我们再创建一个index.html文件,事例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
</body>
</html>5.webpack的配置
我们的项目通常会有一个入口(entry)文件，将main.js当成这个入口,我们通过配置webpack来致命它的位置。
首先，在项目根目录中新建一个webpack.config.js,这是webpack默认的配置文件名称，添加如下内容:
module.exports = {
entry:’./main.js’
}如果在这时在终端运行webpack，会出现
Output filename not configured因为我们少了一个指定输入文件的路径与名称
在webpack.config.js中添加一个output：
module.exports={
entry:'./main.js',
output:{
path:__dirname, //输入文件的保存路径
filename:'bundle.js'//项目生成的js，编译在该js里面
}
}现在在项目里运行webpack命令行，我们的根目录会多出一个bundle.js文件：
6.接下来，在index.tml中引用bundle.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
<script src="bundle.js"></script>
</head>
<body></body>
</html>这样就安装成功了，并且可以开始使用了。
实时更新
webpack 提供了 webpack-dev-server 解决实时刷新页面的问题，同时解决实时构建的问题。
1.在全局环境中安装webpack-dev-server
npm install webpack-dev-server -g在项目目录下输入命令行:
webpack-dev-server这样，我们就可以在默认的 http://localhost:8080 网址上打开我们的 index.html
此时，我们可能认为事情是按以下顺序发生的:
1. js 文件修改；
2. webpack-dev-server 监控到变化；
3. webpack 在内存中重新构建 bundle.js；
4. webpack-dev-server 保证页面引用的 bundle.js 文件与内存中一致。
webpack-dev-server 提供了两种模式用于自动刷新页面：
iframe 模式：
我们不访问 http://localhost:8080，而是访问 http://localhost:8080/webpack-dev-server/index.html
inline 模式：
在命令行中指定该模式，webpack-dev-server –inline。这样 http://localhost:8080/index.html 页面就会在 js 文件变化后自动刷新了。
以上说的两个页面自动刷新的模式都是指刷新整个页面，相当于点击了浏览器的刷新按钮。
webpack-dev-server 还提供了一种 –hot 模式，有兴趣的可以去webpack官网学习。
加载器loaders
加载器是一个能编译你app资源文件的预加载器。例如：Babel-loader能编译JSX/ES6文件为JS文件。
1.建一个main.jsx：
const React = require('react');
const ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, I am yidong!</h1>,
document.querySelector('#main')
);2.index.html:
<html>
<body>
<div id="main"></div>
<script src="bundle.js"></script>
</body>
</html>3.webpack.config.js:
module.exports = {
entry: './main.jsx',
output: {
filename: 'bundle.js'
},
module: {
loaders:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
},
]
}
};在webpack.config.js中，module.loaders领域被用于设定加载器。上面的片段用了babel-loader,它需求babel-preset-es2015和babel-preset-react插件来编译ES6和React.你也能采用另外一种方式设定babel查询选项
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}CSS加载器 css-loader
Webpack允许你在JS文件中require CSS , 然后用CSS加载器预加载CSS,
1.安装 CSS 相关的加载器
npm install style-loader css-loader --save-dev2.配置 webpack.config.js 文件
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
loaders:[
{ test: /\.css$/, loader: 'style-loader!css-loader' },
]
}
};3.在 main.js 文件中引入 index.css:
require('./index.css');autoprefixer
我们在写 CSS 时，按 CSS 规范写，构建时利用 autoprefixer 可以输出 -webkit、-moz 这样的浏览器前缀，webpack 同样是通过 loader 提供该功能。
1.安装 autoprefixer-loader
npm install autoprefixer-loader --save-dev2.配置 webpack.config.js
loaders: [{
test: /\.css$/,
loader: 'style!css!autoprefixer?{browsers:["last 2 version", "> 1%"]}',
}]基本的webpack使用就实现了。