webpack现在已经成为了大众化的项目必要脚手架，基本上现在的很多项目都需要webpack，由于webpack的出现glup和grunt已经完败，今天我们来说一下webpack如何使用。
首先我们需要包依赖，npm init初始化package.json,我们只需要把我们需要的东西引入就可以了，代码如下：
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"test": "",
"build": "webpack -p",
"dev": "webpack -w"
},
"author": "",
"license": "",
"devDependencies": {
"babel-core": "^6.20.0",
"babel-loader": "^6.2.9",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.13.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-0": "^6.16.0",
"babel-runtime": "^6.20.0",
"crypto": "*",
"happypack": "^3.0.2",
"css-loader": "^0.23.1",
"es6-promise": "*",
"extract-text-webpack-plugin": "^1.0.1",
"fetch-polyfill": "^6.13.0",
"file-loader": "^0.9.0",
"node-sass": "^3.13.1",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue": "^2.0.5",
"vue-hot-reload-api": "^2.0.6",
"vue-html-loader": "^1.2.3",
"vue-awesome-swiper": "*",
"vue-loader": "^8.5.4",
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2",
"webpack-merge": "^0.14.1"
},
"dependencies": {
"babel-polyfill": "^6.20.0",
"fetch-polyfill": "^0.8.2",
"vue-lazyload": "^1.0.0-rc7"
}
}
scripts下面是命名npm运行,只要我们npm run build就会执行webpack -w
devDependencise 里面是所有的开发环境依赖包
deoendencies 里面是所有的生产环境的依赖包
也就是我们开发需要的东西都依赖在dev下，这样我们在电脑上执行npm install就会把所有的dev依赖全部安装下来
我们配置的相面的npm之后我们就可以配置webpack的config了
我们新建一个webpack.config.js代码如下
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry:{
home:'./source/javascript/home.config.js'
},
output:{
path:'dist/',
filename:'[name].js'
},
module:{
loaders:[
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style','css!sass')
},
{
test: /\.es6$/,
loader: "babel-loader",
query:{
presets:['es2015']
}
},
{test:/\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader?-autoprefixer")},
{ test: /\.vue$/, loader: 'vue'}
]
},
plugins:[
new ExtractTextPlugin("[name].css"),
]
};
当我们运行npm run dev的时候，就会执行到这个文件
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
第一行代码为了把webpack引入到当前文件中，webpack我们之前npm install的时候已经加载到node_modules中
第二行代码是为了打包css文件，编译sass，acss，less等，他还有一个更好的优点就是postcss处理自动添加适应不同css浏览器的前缀。
之后我们只需要开始写webpack的配置：
module.exports = {
entry:{//项目入口，文件从这里进入
home:'./source/javascript/home.config.js'
},
output:{//项目出口，压缩到这个目录下
path:'dist/',
filename:'[name].js'
},
module:{//添加一些我们需要依赖的loaders，注意：所有我们需要的依赖都需要写在package.json中然后install进入到项目里面
loaders:[
{//将scss编译成css压缩文件
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style','css!sass')
},
{//将所有的es6语法编译成es5语法，注意：这里babel的配置可以卸载query中，但是还是推荐自己新建一个.babelrc来配置
test: /\.es6$/,
loader: "babel-loader",
query:{
presets:['es2015']
}
},
{test:/\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader?-autoprefixer")},
{ test: /\.vue$/, loader: 'vue'}//编译vue
]
},
plugins:[//引入需要的组件，例如我们react项目，我们需要阿里开发的ant样式库，我们需要install到项目中，之后配置到webpack这个位置
new ExtractTextPlugin("[name].css"),
]
};
babelrc配置：
{
"presets": ["es2015", "stage-0", "react"]
}
es2015:表示转移es6语法
stage-0:表示es7语法天的转码规则一共有四个阶段（推荐使用2，虽然没有太大区别）
当然我们可能有的项目也会需要用到eslint，他和babel是类似的也是需要一个.eslintrc文件
{
"plugins": [
"babel"
],
"rules": {
"arrow-parens": ,
"babel/arrow-parens": ,
"no-console": ,
"no-const-assign":
}
}
当你把所有都配置好之后，我们只需要运行npm run dev命令，我们就会吧自己的js，vue压缩到对应的dist目录中，我们在页面只需要引入dist中js和css就实现了资源压缩的目的