一小时入门webpack

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就实现了资源压缩的目的