前提提要，这个配置只针对webapck 4.0以下的项目开发，并且开发中依赖的插件都只针对指定的版本，因为我在安装这些插件时时常会遇到不知名的 “not found moudle ……”报错，绝大多数情况下是因为各个插件之间版本依赖的关系产生的，所以先祭上我的package.json和项目目录

"devDependencies": {
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^2.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.0",
    "url-loader": "^1.1.1",
    "webpack": "^3.0.1",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^2.11.3"
  },
  "dependencies": {}

 前期知识准备

1、webpack配置文件配置选项说明：

entry：js的入口文件；

externals：外部依赖的声明；

output：目标文件；

resolve：配置别名；

module：各种文件、别名；

plugins：插件。

2、webpack基本loader：

html：html-webpack-plugin/html-loader；

js：babel-loader；

css：style-loader、css-loader；

img/font：url-loader、file-loader。

3、webpack常用命令：

webpack：以不压缩代码的形式打包；

webpack -p：以不压缩的方式打包代码，常用于线上发布；

webpack --watch：用于监听文件的改变，用于开发过程；

webpack --config webpack.conf.js：通过 --config 参数来改变配置文件位置。

4、webpack-dev-server:

• 前端开发服务器，在浏览器中可以使用localhost的方式访问我们的项目
• 可以在文件改变是，监听我们的项目变化，自动刷新浏览器

现在开始搭建我们的项目

说明：前提是我们已经安装了node、npm，同时npm已经改为cnpm淘宝镜像，查看linkwebpack官方文档

1、创建项目的git仓库，并远程连接到本地；

2、创建项目目录；

3、进入项目根目录：

1. 命令行执行npm init：初始化我们的项目，生成webpack.json配置文件；
2. 安装wepack：

全局安装webpack：npm install webpack -g

项目中安装webpack：npm install webpack --save-dev

     3.配置入口文件：

const path = require('path');

module.exports = {
    entry: './src/page/index/index.js',
    output: {
        path: './dist',
        filename: 'app.bundle.js'
    }
}

/** 
*   entry: './src/page/index/index.js' 是 
*   entry: {
*       main: './src/page/index/index.js'
*   }
*   的简写形式。
*   当向entry 传入一个文件路径数组时，将创建多个入口
**/

module.exports = {
    entry: {
        index: ['./src/page/index/index.js'],
        login: ['./src/page/login/login.js']
    },
    output: {
        path: path.resolve(__dirname,'./dist'),
        filename: 'js/[name].js'
    }
}
//同时配置output 单独打包

    4. 外部依赖声明jquery

首先在html页面引入jquery文件，在js文件中引入jquery模块 var $ = require('jquery');

module.exports = {
    //省略部分代码
    externals: {
        'jquery': 'window.jQuery'
    }
}

     5.将通用模块打包到一个文件中

当我们在page/index/index.js和page/login/index.js同时引用page/common/index.js时会将common/index.js中的公共模块打包到dist/js/base.js中

//引入webpack
const webpack = require('webpack');

module.exports = {
    //省略部分代码
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            filename: 'js/base.js'
        })
    ]
}

为了避免在每个文件中都要写require('...')的方式引用，我们在page 文件夹下创建common/index.js文件,将以后所有的公共模块放在其中。接着在入口文件中定义这个入口common ，并在plugins的webpack.optimize.CommonsChunkPlugin 中配置参数将所有的通用模块打包到dist/js/base.js中。之后只要在html页面引入base.js公共模块文件就可以了。

module.exports = {
    entry: {
        common: ['./src/page/common/index.js'],
    //省略部分代码
    },
    ...
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',    //这里的common 和entry中的 common互相关联
            filename: 'js/base.js'
        })
    ]
} 

      6.打包css文件

我们在page/index文件夹下为view/index.html文件创建index.css文件并写入样式，接着在page/index.js中引入index.js文件（在index.js中写入require('./index.css')；）。最后为css文件配置loader,记得npm安装loader：

nodule.exports = {
    entry: {...},
    //省略部分代码
    module: {
        loaders: [
            {
                test: /.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    }
}

      7.css文件单独打包

如果我们使用第6条（6.打包css文件）的方会将css文件打包到dist/js/base.js文件中，这样会导致页面一开始没有加载到js文件导致页面没有加载样式文件造成空白样式页面。所以我们应该将css单独打包，通过link标签引入页面。这里我们使用extract-text-webpack-plugin插件，首先npm安装此插件

//引入extract-text-webpack-plugin插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');

//重写我们上一步写的loader
module.exports = {
    entry: {...},
    //省略部分代码
    module: {
        rules: [
            {
                test: /.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
            }
        ]
    },
    plugins: [
        //省略部分代码
        new ExtractTextPlugin('css/[name].css')    //将css文件单独打包到dist/css/文件夹下
    ]
}

      8.html文件打包

打包html文件需要使用 html-webpack-plugin 插件，首先npm安装此插件，然后在webpack.config.js添加配置:

//引入html-webpack-plugin 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //省略部分代码
    plugins: [
        //添加
        new HtmlWebpackPlugin({
            template: './src/view/index.html',    //指定要打包的Html文件
            filename: 'view/index.html',          //将文件打包到dist/view/index.html文件
            inject: true,                         //true表示将css文件插入到head标签中，将js文件插入到body标签底部
            hash: true,                           //true表示将唯一的webpack编译哈希添加到所有包含css、js文件中，对缓存崩溃有用
            chunks: ['common','index']            //需要打包到HTML文件中的模块，这里是指入口文件定义的 common 和 index 模块。
        })
    ]
}

配置完成后我们就不需要在view/index.html中引入样式文件和base.js、index.js文件了，webpack会按照我们配置自动将样式文件和脚本文件自动打包到HTML文件中。

上面的配置只是解决了单个html页面的打包问题，假设我们有多个页面那我们就需要将HtmlWebpackPlugin 的参数封装成一个方法：

//创建生成配置HtmlWebpackPlugin 参数的方法,参数name 是需要打包的html文件名
function getHtmlConfig (name) {
    return {
        template: './src/view/' + name + '.html',
        filename: 'view/' + name + '.html',
        inject: true,
        hash: true,
        chunks: ['common', name]
    }
}

module.exports = {
    //省略部分代码
    plugins: [
        new HtmlWebpackPlugin(getHtmlConfig('index')),
        new HtmlWebpackPlugin(getHtmlConfig('login')),
        ...
    ]
}

      9.利用html-webpack-plugin 提供的EJS模板语法

我们可以利用EJS模板语法将通用的html元素提取成一个组件，在哪里使用就在哪里引入。EJS模板引入需要安装html-loader ，然后在需要引入的地方使用模板语法引入：

<%=require('html-loader!需要引入的模板路径')  %>

      10.图片和字体文件的打包

图片和字体的打包依赖于url-loader和file-loader,首先npm安装这两个loader,接着来配置rules：

module.exports = {
    entry: {...},
    //省略部分代码
    module: {
        rules: [
            //添加规则
            {
                test: /.(png|svg|jpg|gif|jpeg|ttf|eot|woff)??.*$/,
                loader: 'url-loader?limit=128&name=resource/[name].[ext]'
            }
        ]
    }
}

      11.使用webpack-dev-server 开启本地服务器，为项目配置热加载模式（HMR）

安装此插件后，首先要配置环境变量，确定我们的项目在开发环境下还是生产环境：

//在webpack.config.js文件中配置

//声明环境变量 NODE_ENV，默认情况为开发环境
var NODE_ENV = process.env.WEBPACK_ENV || 'dev';

var config = {
    entry: {
        'common': ['./src/page/common/index.js'],
        'index': ['./src/page/index/index.js'],
        'login': ['./src/page/login/index.js']
    }
    //省略部分代码
}

//如果是环境变量是开发模式就启用webpack-dev-server提供的本地服务器启动我们的项目,如果不是就不启动了
if(NODE_ENV === 'dev'){
    config.entry.common.push('webpack-dev-server/client?http://localhost:8000/');
}

module.exports = config;

配置静态资源加载路径publicPath,使打包后文件可以正确访问到静态资源：

//在这里我们为打包后的文件设置publicPath参数为访问静态资源的正确路径为打包后的路径

var config = {
    //省略部分代码
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js',
        publicPath: '/dist/'
    },
}

配置npm启动项，更方便我们调试打包

//在package.json文件的 "scripts" 里添加下面代码，当我们使用 npm run build 和 npm run dev 就会分别执行不同配置的 webpack 操作
// --inline 参数就是启动了webpack-dev-server的HMR（热加载）；-p 是最大化压缩代码，这里我们用到了生产环境中；--port 是指定了我们启动服务器的端口号； "set &&" 是在window操作系统下必需要添加的字段

"scripts": {
    "build": "set NODE_ENV=production && webpack -p",
    "dev": "set NODE_ENV=dev && webpack-dev-server --inline --port 8088"
},

最后我们就可以接着开发我们的项目了

推荐advance100的博文webpack从零配置和Dabao123的博文webpack-dev-server核心概念