这篇文章是好久好久之前写的，还是具有一定的参考价值滴。不喜勿喷哦，前端小白艰苦学习旅程~~~
1.创建一个文件目录webdemo,结构如下：
2.编写index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<div id="app">
Hello World.
</div>
<script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>在准备安装webpack之前,必须先安装了最新版 的Node.js和NPM,并且了解npm初始用法（不了解也没关系看我的就好了··）
3.初始化项目webdemo:
npm init
3.在本地局部安装webpack:
npm install webpack-cli -g
并且安装依赖：
npm i webpack webpack-cli -D
4.在webpack.config.js中初始化它的内容：并且在这里写webpack的出口(output)和入口（entry）。告诉webpack从哪里开始寻找依赖，并且编译；出口则用来配置编译后的文件存储位置和文件名。
var path=require('path');
var config={
entry:{
main:'./dist/main.js'//单入口
},
output:{
path:path.join(__dirname,'./dist'),//这里是两个下划线
publicPath:'/dist/',
filename:'main.js'
},
module:{},
plugins:[],
devServer:{}
};
module.exports=config;//相当于export default config;5.在package.json中的script里面增加一个快速启动webpack-dev-server服务脚本：这个具有热更新功能（服务器不用手动刷新），它通过建立一个websoctket连接实时响应代码修改。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --config webpack.config.js"
},现在在终端执行下面的命令：npm run dev
以上到这里最重要的一部分基本完了。
下面是逐步的完善配置文件
在webpack里，每一个文件都是一个模块，比如css,js,.jpg,.less等。不同的模块需要不同的加载器来处理，而加载器就是webpack最重要的功能。通过安装不同的加载器可以对各种后缀名的文件进行处理，比如现在要写一些css样式，就要用到style-loader和css-loader。
下面通过NPM来安装它们：
npm install css-loader --save-dev
npm install style-loader --save-dev
安装完成，在webpack.config.js中配置loader,增加对.css文件的处理。
var config={ //..... module:{//配置loader，增加对.css文件的处理 rules:[ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } };
在module对象的rules属性中可以指定一系列的loaders，每一个loader都必须包含test和use两个选项。即就是：当webpack在编译过程中遇到require()或import()语句导入一个后缀名为.css的文件时，先通过css-loader转换，再通过style-loader转换，然后继续打包。
在webdemo中新建style.css文件，写样式
并且在main.js中导入样式：import “./style.css”;
在现实中，实际业务不希望css通过js动态创建样式放入main.js中，因为这样会占用js太多体积，还不能做缓存，所以这里就用到了---插件（Plugins）。
安装extract-text-webpack-plugin的插件来把散落在各地的css文件提取出来。打包成main.css,最终带index.html页面通过<link>的形式加载它。
在命令行安装：
npm install extract-text-webpack-plugin --save-dev
然后在配置文件中导入插件，并改写loader的配置：
var ExtractTextPlugin=require('extract-text-webpack-plugin');
var config={
//....
module:{
rules:[
{
test: /\.css$/,
use:ExtractTextPlugin.extract({
use:'css-loader',
fallback:'style-loader'//改写loader配置
})
}
]
},
plugins:[
//重命名提取后的css文件
new ExtractTextPlugin('main.css')
]
};最后在index.html页面用link引入main.css
现在运行一下项目：
会发现报错了：
这是因为extract-text-webpack-plugin目前还没有webpack4版本。所以利用npm install -D extract-text-webpack-plugin@next来安装。
###########################################################################################单个组件与vue-loader
首先在使用.vue文件时，必须要先安装vue-loader,vue-style-loader等加载器作为配置。如果还要使用es6语法，那还需安装babel和babel-loader等加载器。使用npm逐个安装以下依赖：
npm install --save vue
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader
npm install --save-dev vue-template-compiler
npm install --save-dev vue-hot-reload-api
npm install --save-dev babel
npm install --save-dev babel-loader
npm install --save-dev babel-core
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-runtime
安装完成之后在webpack.config.js里面修改配置文件来支持es6和.vue文件
module: {//配置loader，增加对.css文件的处理
rules: [{
test:/\.vue$/,
loader:'vue-loader',
options:{
loaders:{
css:ExtractTextPlugin.extract({
use:'css-loader',
fallback:'vue-style-loader'
})
}
}
},
{
test:/.\js$/,
loader:'babel-loader',
exclude:/node_modules/
},
{
test:/\.css$/,
use:ExtractTextPlugin.extract({
use:'css-loader',
fallback:'style-loader'
})
}
]
},在这里多了一项options:用来进一步对不同语言进行配置。比如对css进行处理时，会先通过css-loader解析，然后把处理结果交给vue-style-loader处理。。。
在webdemo下面新建名为.babelrc的文件，并且写入babel进行配置，webpack会依赖此配置文件来使用babel编译ES6代码：
{
"presets":["es2015"],
"plugins":["transform-runtime"],
"comments":false
}现在就可以写,vue文件了。
webdemo下面新建app.vue文件，并写入以下内容：
<template>
<div>Hello{{name}}</div>
</template>
<script>
new VueLoaderPlugin();
export default{
data(){
return{
name:'Vue.js'
}
}
}
</script>
<style scoped>
div{
color:blue;
font-size:40px;
}
</style>
