webpack安装
我们可以用npm安装webpack，要用npm我们就需要安装node.js环境，作为我们的平台。
下载node.js
下载好之后安装，我们在cmd或者GitBashHere中输入
npm -v
node -v
如果出现版本号，说明你安装成功了！
现在我们全局安装webpack，这样你就不需要每创建一个项目就安装一次了
npm install webpack -g //-g代表全局安装
运行结果大概如下
从一个项目开始用webpack
首先创建一个文件夹，我的文件夹是test01
在test01中输入下面的内容，你会发现文件夹中生成了一个package.json的文件，这是一个标准的npm说明文件，里面包含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。
npm init
提示中按回车就好，如果你不准备在npm中发布你的模块。
接下来我们将webpack安装到我们的目录中,作为依赖
npm install webpack --save-dev
此时文件夹中多了node-modules和package-lock.json
尝试打包
我们在根目录下创建如下文件夹及文件
因为打包css文件需要安装依赖，所以我们先打包js文件作为尝试
在app.js中
module.exports = console.log("Hello Webpack!");
index.js中
require("./app.js");
index.html中
<body>
<h1>Hello</h1>
<script src="./src/bundle.js"></script>
</body>
在根目录下运行
webpack ./src/js/index.js ./src/bundle.js
此时在src文件夹下面生成了一个bundle文件
在浏览器中打开index.html文件，app.js中的内容被打包到bundle.js中了。
打包css文件
打包css文件需要安装依赖
npm install css-loader --save-dev
npm install style-loader --save-dev
在index.css文件中添加样式，并在index.js中引入css文件
require("style-loader!css-loader!../css/index.css");
再打包一遍，此时样式被加载到文件中
打包多个文件
在entry中放入多个入口文件，output中的路径可以不变，filename复制下面的代码，会分别生成对应于入口文件的js文件
module.exports = {
// 多文件
entry: {
build: __dirname + "/src/js/index.js", //生成build.js
list: __dirname + "/src/js/entry.js", //生成list.js
},
output: {
path: __dirname + "/out",
filename: "[name].js"
},
module: {
loaders: [
{ test:/\.css$/,loader:'style-loader'},
{ test:/\.css$/,loader:'css-loader'}
]
}
}
简化打包
在根目录下创建一个叫webpack.config.js的文件,内容如下：
module.exports = {
entry: __dirname+ "/src/js/index.js", //入口文件
output: {
path: __dirname + "/src", //打包后文件的路径
filename: "bundle.js" //打包后文件名称
}
}
在命令行中只需要输入webpack即可实现打包，记住打包命令一定是在根目录下面，不要手误
webpack
热加载（使用webpack构建本地服务器）
我们每次改变文件中的内容，都需要重新打包，这样就加重了我们的任务量，有了热加载，我们就不需要打包，程序会自动打包，并且在浏览器上显示出来。
npm install webpack-dev-server -g //安装
npm install --save-dev webpack-dev-server //添加到依赖
修改配置文件webpack.conf.js
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/src/js/index.js",
output: {
path: __dirname + "/src",
// path: "/",
filename: "bundle.js"
},
devServer: {
historyApiFallback: true, //如果设置为true，所有的跳转将指向index.html
inline: true //设置为true，当源文件改变时会自动刷新页面
}
}
devServer中还有其他可以配置的参数，后面的链接中有比较详细的介绍
package.json
{
"name": "test01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"server": "webpack-dev-server --open" //加入这一行，json文件中不支持注释，需要删除
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.7",
"style-loader": "^0.19.1",
"webpack": "^3.10.0"
}
}
此时热加载就配置好了，在命令行中输入
npm run server
浏览器窗口会自己打开，并且当你修改文件时，浏览器会自动加载，你可以修改css看看效果