3、CommonChunkPlugin提取公共js-以提取一个jquery为例

cnpm install css-loader --save-dev //css-loader 是将css打包进js

cnpm install style-loader --save-dev //style-loader 将css通过require方式引入进来

cnpm install sass-loader node-sass --save-dev //同时安装sass 和sass-loader

cnpm install extract-text-webpack-plugin --save-dev //把css从js中提取出来

目录结构(publi为src编译生成的文件)

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
<link rel="stylesheet" type="text/css" href="public/css/index.css" />    
    <body>
            <div id="app">6r</div>
            <p id="demo">456</p>
    </body>
    <script type="text/javascript" src="public/js/jquery.min.js"></script>
    <script type="text/javascript" src="public/js/index.js"></script> 
     <!-- assets是通过publicPath虚构出来的暂存空间，它不直接在硬盘内存中，通过webpack-dev-server来运行 -->
</html>

index.scss

$col:pink;
@import "./demo"; //导入css
body{
 font-size: 900%;
  #app{color:$col;}
}

demo.css

  #demo{color:blue;}

index.js

require("../css/index.scss"); 

$('#app').html("1334");
$("#app").click(function(event){
        alert(123)
    });

webpack.config.js

var webpack = require("webpack");
var webpckDevServer = require("webpack-dev-server");
var ExtractTextPlugin = require('extract-text-webpack-plugin'); //抽离css插件
var extractCss = new ExtractTextPlugin("css/index.css"); //实例化，并并填写输出的一个路径[]中表示输出默认名称,这个目录相对于提出的那个目录
module.exports = {
    entry:{
        index:__dirname + "/src/js/index.js",//入口文件 webpack-dev-server 实时刷新监控的目录
        jq:['jquery'] //这是个多入口，可以写多个依赖的库，例如jq:['jquery','react'],这里引用了就不用在index.js里面用require或者用es6 import引用
    },
    output: {
        path: __dirname + "/public/",
        filename: "js/index.js",
        publicPath: '/assets/' //打开webpack-dev-server 服务器工具时可以再index里面引用此地址，打开速度会快一点,另外他不是直接在内存中存放而是先在webpack的虚拟内存中暂存,所以在webpack未编译之前能够运行，如果直接写实体目录则不经过webpack打包编译，浏览器是识别不了的，所以先放在这个虚拟目录里，因为是虚拟目录，所以你看不到他的编译文件
    },
    devServer: {
        contentBase: "./",
        //根目录
        host: '192.168.199.171',
        //ip设置 要相对的进行改变
        port: "80",
        //端口
        colors: true,
        open: true //自动打开浏览器   
    },
    module: {
        loaders: [{
            test: /.css$/,
            //匹配.css文件
            loader: ExtractTextPlugin.extract("style-loader", "css-loader")
        },
        {
            test: /.scss$/,
            loader: ExtractTextPlugin.extract("style-loader", "css!sass")
        }]
    },
    plugins: [
        extractCss,
        new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false
                } //自动输出压缩后的js
        }),
             // 声明jquery为全局变量（不建议使用，会污染，知道这个写法就好） ,在多个文件打包时声明全局变量会影响到代码的重叠，因为全局
            // new webpack.ProvidePlugin({
             //        $:'jquery'
             //    }),
              // 拆分插件
        new webpack.optimize.CommonsChunkPlugin({
            name:'jq', // 上面入口定义的节点组
            filename:'js/jquery.min.js' //最后生成的文件名，生成的位置和引用的位置同目录 与上面的jq['jquery','react']不同这是一个单出口
        })

 　　　//第二种写法　new webpack.optimize.CommonsChunkPlugin('jq', 'js/jquery.min.js' ) 
　　　 //还有一种就是什么都不写，只在entry:入口加一个入口文件（ jq:['jquery']）就可以

] }

package.json

{
  "name": "webp2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "www": "cnpm run demo && cnpm run devServer",
    "demo": "webpack --watch --progress -d -p --color",
    "demo2": "webpack --config webpack.config123.js --watch --progress -d -p --color",
    "start": "webpack --watch --progress -d -p --color",
    "devServer": "webpack-dev-server --inline --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "jquery": "^3.1.1",
    "node-sass": "^4.0.0",
    "sass-loader": "^4.1.0",
    "style-loader": "^0.13.1",
    "uglify-js": "^2.7.5",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }
}