一小时入门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": 0,
    "babel/arrow-parens": 2,
    "no-console": 0,
    "no-const-assign": 2
  }
}

当你把全部都配置好以后，咱们只须要运行npm run dev命令，咱们就会吧本身的js，vue压缩到对应的dist目录中，咱们在页面只须要引入dist中js和css就实现了资源压缩的目的