shushu2013 / shushu2013.github.io Goto Github PK

function show(content) {
  window.document.getElementById('app').innerText = 'Hello,' + content;
}
show('Webpack');

const path = require('path');

module.exports = {
    // 入口文件的配置项
    entry: {
        index: './src/index.js'
    },
    // 出口文件的配置项
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    // 模块：例如转换 es6, less, 压缩, 图片转换等...
    module: {},
    // 插件，用于生产模板和各项功能
    plugins: [],
    // 配置 webpack 开发本地服务器功能
    devServer: {}
}

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 入口文件的配置项
    entry: {
        index: './src/js/index.js'
    },
    // 出口文件的配置项
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    // 模块：例如转换 es6, less, 图片转换等...
    module: {},
    // 插件，用于生产模板等各项功能
    plugins: [
        new HtmlWebpackPlugin({
            title: 'learn webpack',         // 标题
            template: './src/index.html',   // html 模板
            filename: 'index.html',         // 生成的 HTML 名称
            inject: 'true',                 // 引入生成的 js 文件，false 则不引入
            minify: {
                removeComments : true,      //去掉注释
                collapseWhitespace : true   //去掉空行
            }
        })
    ],
    // 配置 webpack 开发本地服务器功能
    devServer: {}
}

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {

    // ...省略其他配置
    
    plugins: [
        new CleanWebpackPlugin(['dist'])   //构建前，删除 dist 目录
    ]
}

// 应该被清除的目录或文件
let pathsToClean = [
  'dist',         // 删除 'dist' 目录
  'build/*.*',    // 删除 'build' 目录下的所有文件
  'web/*.js'      // 删除 'web' 目录下所有的 js 文件
]

// 相关选项
let cleanOptions = {
  // 设置绝对路径，默认为项目根目录
  root: __dirname,

  // 是否在控制台显示清除信息
  verbose: true,
  
  // Use boolean "true" to test/emulate delete. (will not remove files).
  // Default: false - remove files
  dry: false,           

  // If true, remove files on recompile. 
  // Default: false
  watch: false,

  // Instead of removing whole path recursively,
  // remove all path's content with exclusion of provided immediate children.
  // Good for not removing shared files from build directories.
  exclude: [ 'files', 'to', 'ignore' ],

  // allow the plugin to clean folders outside of the webpack root.
  // Default: false - don't allow clean folder outside of the webpack root
  allowExternal: false
}

new CleanWebpackPlugin(pathsToClean, cleanOptions)

var gulp = require('gulp');
var less = require('gulp-less');

// less 处理
gulp.task('less', function() {
    return gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('dist/css'));
});

var gulp = require('gulp');
var ejs = require('gulp-ejs');
var data = require('gulp-data');

var path = require('path');
var fs = require('fs');

// getJsonData
var getJsonData = function(file) {
    // G:\workspace\glup-test\src\index.ejs
    // => src/temple/index.json
    var jsonFile = 'src/temple/' + path.basename(file.path, '.ejs') + '.json';
    var data = JSON.parse(fs.readFileSync(jsonFile));
    return data;
}

// ejs 处理
gulp.task('ejs', function() {
    return gulp.src('src/*.ejs')
        .pipe(data(getJsonData))
        .pipe(ejs({},{},{ext: '.html'}))
        .pipe(gulp.dest('./dist'));
});

var gulp = require('gulp');
var less = require('gulp-less');
var ejs = require('gulp-ejs');
var data = require('gulp-data');

var path = require('path');
var fs = require('fs');

var srcPath = {
    less: 'src/less/*.less',
    ejs: 'src/*.ejs',
    json: 'src/temple/*.json'
};

var buildPath = {
    css: 'dist/css',
    html: 'dist'
};


// 默认执行的任务
gulp.task('default', ['less', 'ejs', 'watch'], function() {
    console.log('default task ok!');
})

// less 处理
gulp.task('less', function() {
    return gulp.src(srcPath.less)
        .pipe(less())
        .pipe(gulp.dest(buildPath.css))
        .pipe(connect.reload());
});

// getJsonData
var getJsonData = function(file) {
    // G:\workspace\glup-test\src\index.ejs
    // => src/temple/index.json
    var jsonFile = 'src/temple/' + path.basename(file.path, '.ejs') + '.json';
    var data = JSON.parse(fs.readFileSync(jsonFile));
    return data;
}
// ejs 处理
gulp.task('ejs', function() {
    return gulp.src(srcPath.ejs)
        .pipe(data(getJsonData))
        .pipe(ejs({},{},{ext: '.html'}))
        .pipe(gulp.dest(buildPath.html))
        .pipe(connect.reload());
});

// 监听任务
gulp.task('watch', function() {
    console.log('watch...')

    gulp.watch(srcPath.less, ['less']);   // 监听 less 文件
    gulp.watch(srcPath.ejs, ['ejs']);     // 监听 ejs 文件
    gulp.watch(srcPath.json, ['ejs']);    // 监听 json 文件
})

// 热加载
gulp.task('webserver', function() {
    connect.server({
        root: ['dist'],  // 监控的目录
        port: 5000,      // 端口
        livereload: true    // 启用热加载
    });
});

// less 处理
gulp.task('less', function() {
    return gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('dist/css'))
        .pipe(connect.reload()); // css 文件更新后通知刷新页面
});

// ejs 处理
gulp.task('ejs', function() {
    return gulp.src('src/*.ejs')
        .pipe(data(getJsonData))
        .pipe(ejs({},{},{ext: '.html'}))
        .pipe(gulp.dest('./dist'))
        .pipe(connect.reload()); // html 文件更新后通知刷新页面
});

/ 默认执行的任务
gulp.task('default', ['webserver', 'less', 'ejs', 'watch'], function() {
    console.log('default task ok!');
})

var gulp = require('gulp');
var less = require('gulp-less');
var plumber = require('gulp-plumber');

gulp.task('less', function() {
  return gulp.src('less/*.less')
      .pipe(plumber())      // 在插件前使用
      .pipe(less())
      .pipe(gulp.dest('./dist/css'))
});

var gulp = require('gulp');
var less = require('gulp-less');
var ejs = require('gulp-ejs');
var data = require('gulp-data');
var plumber = require('gulp-plumber');
var connect = require('gulp-connect');

var path = require('path');
var fs = require('fs');

var srcPath = {
    less: 'src/less/*.less',
    ejs: 'src/*.ejs',
    json: 'src/temple/*.json'
};

var buildPath = {
    css: 'dist/css',
    html: 'dist'
};


// 默认执行的任务
gulp.task('default', ['webserver', 'less', 'ejs', 'watch'], function() {
    console.log('default task ok!');
})

// 热加载
gulp.task('webserver', function() {
    connect.server({
        root: ['dist'],  // 监控的目录
        port: 5000,
        livereload: true
    });
});

// less 处理
gulp.task('less', function() {
    return gulp.src(srcPath.less)
        .pipe(plumber())
        .pipe(less())
        .pipe(gulp.dest(buildPath.css))
        .pipe(connect.reload());
});

// getJsonData
var getJsonData = function(file) {
    // G:\workspace\glup-test\src\index.ejs
    // => src/temple/index.json
    var jsonFile = 'src/temple/' + path.basename(file.path, '.ejs') + '.json';
    var data = JSON.parse(fs.readFileSync(jsonFile));
    return data;
}
// ejs 处理
gulp.task('ejs', function() {
    return gulp.src(srcPath.ejs)
        .pipe(plumber())
        .pipe(data(getJsonData))
        .pipe(ejs({},{},{ext: '.html'}))
        .pipe(gulp.dest(buildPath.html))
        .pipe(connect.reload());
});

// 监听任务
gulp.task('watch', function() {
    console.log('watch...')

    gulp.watch(srcPath.less, ['less']);   // 监听 less 文件
    gulp.watch(srcPath.ejs, ['ejs']);     // 监听 ejs 文件
    gulp.watch(srcPath.json, ['ejs']);    // 监听 json 文件
})

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

    // ... 省略其他配置项
    
    module: {
        rules:[
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                minimize: true
                            }
                        },{
                            loader: 'less-loader'
                        }
                    ],
                    // publicPath 的设置需根据提取的 css 存放的目录层级进行改变
                    publicPath: '../'
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            // 从 js 文件中提取出来的 css 文件的名称，可设置路径
            filename: 'css/[name]-[contenthash:8].css'
        })
    ]
    
}

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

    // ... 省略其他配置项
    
    module: {
        rules:[
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                minimize: true
                            }
                        },{
                            loader: 'sass-loader'
                        }
                    ],
                    // publicPath 的设置需根据提取的 css 存放的目录层级进行改变
                    publicPath: '../'
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            // 从 js 文件中提取出来的 css 文件的名称，可设置路径
            filename: 'css/[name]-[contenthash:8].css'
        })
    ]
    
}

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

    // ... 省略其他配置项
    
    module: {
        rules:[
            {
                test: /\.styl$/,
                use: ExtractTextPlugin.extract({
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                minimize: true
                            }
                        },{
                            loader: 'stylus-loader'
                        }
                    ],
                    // publicPath 的设置需根据提取的 css 存放的目录层级进行改变
                    publicPath: '../'
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            // 从 js 文件中提取出来的 css 文件的名称，可设置路径
            filename: 'css/[name]-[contenthash:8].css'
        })
    ]
    
}

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

{

  // ... 忽略其他配置项
  
  "browserslist": [
    "> 1%",             // 兼容市场上浏览器份额大于 1% 的浏览器
    "last 2 versions",  // 兼容浏览器最新的前两个版本
    "not ie <= 8"       // 不兼容 IE8 及以下版本
  ]
  
}

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

    // ... 省略其他配置项
    
    module: {
        rules: [
            {
                // 用正则去匹配要用该 loader 转换的 CSS 文件
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    // 转换 css 文件需要使用的 Loader
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                // 在 css-loader 之前有多少个 loader 应该对 @import 资源进行解析
                                importLoaders: 1,
                                minimize: true
                            }
                        },
                        {
                            loader: 'postcss-loader'
                        }
                    ],
                    // publicPath 的设置需根据提取的 css 存放的目录层级进行改变
                    publicPath: '../'
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
          // 从 js 文件中提取出来的 css 文件的名称，前面可加存放路径
          filename: `css/[name]-[contenthash:8].css`,
        })
    ]
}

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

    // ... 省略其他配置项
    
    module: {
        rules:[
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                // 在 css-loader 之前有多少个 loader 应该对 @import 资源进行解析
                                importLoaders: 2,
                                minimize: true
                            }
                        },
                        {
                            loader: 'postcss-loader'
                        },
                        {
                            loader: 'less-loader'
                        }
                    ],
                    // publicPath 的设置需根据提取的 css 存放的目录层级进行改变
                    publicPath: '../'
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            // 从 js 文件中提取出来的 css 文件的名称，可设置路径
            filename: 'css/[name]-[contenthash:8].css'
        })
    ]
    
}

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PurifyCssPlugin = require('purifycss-webpack');
const glob = require('glob');   // 用来同步检查 html 模板

module.exports = {

    // ... 省略其他配置项
    module: {
        rules: [
            {
                // 用正则去匹配要用该 loader 转换的 CSS 文件
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    // 转换 .css 文件需要使用的 Loader
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                minimize: true
                            }
                        }
                    ],
                    // publicPath 的设置需根据提取的 css 存放的目录层级进行改变
                    publicPath: '../'
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            // 从 js 文件中提取出来的 css 文件的名称，可设置路径
            filename: 'css/[name]-[contenthash:8].css'
        }),
        // 确保 purifycss-plugin 在 extract-text-webpack-plugin 后面
        new PurifyCssPlugin({
            // 必须写绝对路径，同步检查 html 模板
            paths: glob.sync(path.resolve(__dirname, 'src/*.html'))
        })
    ]
    
}

module.exports = {

    // ... 省略其他配置项
    
    // 模块：例如转换 es6, less, 图片转换等...
    module: {
        rules:[
        
            // ...省略其他配置项
            
            {
                test: /\.js$/,
                use: [{
                    loader: 'babel-loader'
                }]
            }
        ]
}

// 回调函数
function doSomething(data) {
    console.log('The author is: ' + data.name);
}
// 动态创建 JS
var script = document.createElement('script');
//与服务器端约定 callback 参数，用来指定回调函数的名字
script.src = 'http://www.wenbo.com/author?callback=doSomething';
document.body.appendChild(script);

// 服务器收到 http://www.wenbo.com/author?callback=doSomething 请求后
// 会将数据放到回调函数的参数位置返回
// doSomething({"name": "wenbo"});

// 假如服务器是 NodeJS，核心代码如下
const data = {name: 'wenbo'}
// 获取查询参数callback，就是我们在客户端定义的 doSomething
const callback = url.parse(req.url, true).query.callback
if (callback) {
    const str = callback + '(' + JSON.stringify(data) + ')'
    // 以字符串的形式返回
    res.end(str)
} else {
    res.end('hello world')
}

// jquery 会自动生成一个全局函数来替换 callback=? 中的 ?, 之后获取到数据又会自动销毁，实际上就是起一个临时代理函数的作用。
$.getJSON('http://www.wenbo.com/author?callback=?', function(data) {
    console.log('The author is: ' + data.name);
})

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.wenbo.com/author",true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            console.log(xhr.responseText);
        } else {
            console.log('Request status: ' + xhr.status);
        }
    }
}
xhr.send();

/* websocket协议为ws/wss, 类似http/https的区别 */
wsUrl = 'wss://127.0.0.1:8090/ws/';
/* 发送 */
ws = new WebSocket(wsUrl);
/* 连接成功建立时调用 */
ws.onopen = function (event) {
  console.log("websocket command onopen");
  var msg = {
    username: 'YeaseonZhang'
  }
  /* 通过 send() 方法向服务端发送消息，参数必须为字符串 */
  ws.send(JSON.stringify(msg));
};
/* 服务端向客户端发送消息时调用 */
ws.onmessage = function (event) {
  /* event.data包含了服务端发送过来的消息 */
  console.log("websocket command onmessage: " + event.data);
  if (event.data === 'success') {
    /* 通过 close() 方法断开websocket连接 */
    ws.close();
  }
};
/* 连接被关闭时调用 */
ws.onclose = function (event) {
  console.log("websocket command onclose: " + event.data);
};
/* 出现错误时调用 */
ws.onerror = function (event) {
  console.log("websocket command onerror: " + event.data);
};

module.exports = {

    // ... 省略其他配置项
    
    // 模块：例如转换 es6, less, 图片转换等...
    module: {
        rules:[
        
            // ...省略其他配置项
            
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: [
                    { 
                        loader: 'file-loader',
                        options: {
                            name: '[name]-[hash:8].[ext]',
                            // 提取出来的图片放置在 image 目录下，后面的 / 不能省略
                            outputPath: 'image/'
                        }
                    }
                ]
            }
        ]
}

module.exports = {

    // ... 省略其他配置项
    
    // 模块：例如转换 es6, less, 图片转换等...
    module: {
        rules:[
        
            // ...省略其他配置项
            
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 5120,
                            name: '[name]-[hash:8].[ext]',
                            outputPath: 'image/'
                        }
                    }
                ]
            }
        ]
    }
}

module.exports = {

    // ... 省略其他配置项
    
    // 模块：例如转换 es6, less, 图片转换等...
    module: {
        rules:[
        
            // ...省略其他配置项
            
            {
                test: /\.(htm|html)$/i,
                use: ['html-withimg-loader']
            }
        ]
    }
}

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

    // 入口文件的配置项
    entry: {
        index: './src/js/index.js'
    },
    // 出口文件的配置项
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name]-[chunkhash:8].js'
    },

    // ... 省略其他配置项
    
    module: {
        rules: [
            {
                // 用正则去匹配要用该 loader 转换的 CSS 文件
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    // 使用 css-loader 对 css 进行压缩
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                minimize: true
                            }
                        }
                    ]
                })
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: [
                    { 
                        loader: 'file-loader',
                        options: {
                            name: '[name]-[hash:8].[ext]',
                            // 提取出来的图片放置在 image 目录下，后面的 / 不能省略
                            outputPath: 'image/'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
          // 从 js 文件中提取出来的 css 文件的名称，前面可加存放路径
          filename: `css/[name]-[contenthash:8].css`,
        })
    ]
}

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

    // ... 省略其他配置项
    
    module: {
        rules: [
            {
                // 用正则去匹配要用该 loader 转换的 CSS 文件
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    // 使用 css-loader 对 css 进行压缩
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                minimize: true
                            }
                        }
                    ],
                    publicPath: '../'
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
          // 从 js 文件中提取出来的 css 文件的名称，前面可加存放路径
          filename: `css/[name]-[contenthash:8].css`,
        })
    ]
}

module.exports = {

    // ... 省略其他配置项
    
    // 模块：例如转换 es6, less, 图片转换等...
    module: {
        rules:[
        
            // ...省略其他配置项
            
            {
                // 用正则去匹配要用该 loader 转换的 CSS 文件
                test: /\.css$/,
                use: ExtractTextPlugin.extract({    // 从 js 文件中提取 css 
                
                    // 使用 css-loader 对 css 进行压缩
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                minimize: true
                            }
                        }
                    ]
                })
            }
        ]
    }
    plugins: [
    
        // ...省略其他配置项
        
        new HtmlWebpackPlugin({
        
            // ...省略其他配置项
            
            // 对生成的 HTML 进行压缩配置
            minify: {
                removeComments : true,      //去掉注释
                collapseWhitespace : true   //去掉空行
            }
        })
    ]
}

const uglifyjs = require('uglifyjs-webpack-plugin');

module.exports = {

    // ... 省略其他配置项
    
    plugins: [
    
        // ...省略其他配置项
        
        new uglifyjs({
        
            // 相关配置参数与使用的 uglifyjs-webpack-plugin 版本有关
            
            // 生成 sourceMap，配合 devtool: 'sourceMap' 使用
            sourceMap: true,
            compress: {
                // 去掉 console 打印信息
                drop_console: true
            },
            beautify: false      // 格式化输出
        })
    ]
}

module.exports = {

    // ... 省略其他配置项
    
    // 模块：例如转换 es6, less, 图片转换等...
    module: {
        rules:[
            {
                // 用正则去匹配要用该 loader 转换的 CSS 文件
                test: /\.css$/,
                use: ['style-loader', 'css-loader?minimize']
            }
        ]
    }
}

方法一：通过 'webpack-dev-server' 命令行选项 '--hot' 来指定开启模块热替换

// 在 package.json 文件中配置 npm script 脚本命令
"scripts": {
    "dev": "webpack-dev-server --hot"
}


方法二：在配置文件的 'devServer' 选项中开启模块热替换时，需要在 'plugins' 配置项中加入  
'Webpack' 自带 'HotModuleReplacementPlugin' 插件，所以需要先引入 `webpack`，代码如下：  

const webpack = require('webpack');

module.exports = {

    // ... 省略其他配置项
    
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    // 配置 webpack 开发本地服务器功能
    devServer: {
        // 开启模块热替换 (不刷新网页进行更新)
        hot: true
        
        // ... 省略其他配置项
    }
}

module.exports = {
    // 入口文件的配置项
    entry: {
        index: './src/js/index.js'
    },
    // 出口文件的配置项
    output: {
        path: path.resolve(__dirname, 'dist'),
        // 当开启模块热替换时，使用 hash
        filename: 'js/[name]-[hash:8].js'
    }
    
     // ... 省略其他配置项
}

module.exports = {

    // ... 省略其他配置项
 
    module: {
        rules:[
            {
                // 用正则去匹配要用该 loader 转换的 CSS 文件
                test: /\.css$/,
                use: ExtractTextPlugin.extract({    // 从 js 文件中提取 css 
                    // 转换 .css 文件需要使用的 Loader
                    use: ['css-loader?minimize']
                })
            }
        ]
    }
}

改为

module.exports = {

    // ... 省略其他配置项
 
    module: {
        rules:[
            {
                // 用正则去匹配要用该 loader 转换的 CSS 文件
                test: /\.css$/,
                use:  ['style-loader', 'css-loader?minimize']
            }
        ]
    }
}

module.exports = {

    // ... 省略其他配置项
    
    devtool: 'source-map'
}

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    // 入口文件的配置项
    entry: {
        index: './src/js/index.js'
    },
    // 出口文件的配置项
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name]-[hash:8].js'
    },
    // 模块：例如转换 es6, less, 图片转换等...
    module: {
        rules:[
            {
                // 用正则去匹配要用该 loader 转换的 CSS 文件
                test: /\.css$/,
                use:  ['style-loader', 'css-loader?minimize']
            }
        ]
    },
    // 插件，用于生产模板等各项功能
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            title: 'learn webpack',         // 标题
            template: './src/index.html',   // html 模板
            filename: 'index.html',         // 生成的 HTML 名称
            inject: 'true',                 // 引入生成的 js 文件，false 则不引入
            minify: {
                removeComments : true,      //去掉注释
                collapseWhitespace : true   //去掉空行
            }
        })
    ],
    // 配置 Source Maps
    devtool: 'source-map',
    // 配置 webpack 开发本地服务器功能
    devServer: {
        // 服务器的IP地址，默认为 localhost
        host:'localhost',
        // 服务端压缩是否开启
        compress:true,
        // 配置服务端口号，默认为 8080
        port:8000,
        // 使用默认浏览器自动打开网页
        open: true,
        // 开启模块热替换 (不刷新网页进行更新)
        hot: true
    }
}

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    // 入口文件的配置项
    entry: {
        index: './src/js/index.js',
        // list: './src/js/list.js'
    },
    // 出口文件的配置项
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name]-[chunkhash:8].js'
    },
    // 模块：例如转换 es6, less, 图片转换等...
    module: {
        rules:[
            {
                // 用正则去匹配要用该 loader 转换的 CSS 文件
                test: /\.css$/,
                use: ExtractTextPlugin.extract({    // 从 js 文件中提取 css 
                    // 转换 .css 文件需要使用的 Loader
                    use: ['css-loader?minimize']
                })
            }
        ]
    },
    // 插件，用于生产模板等各项功能
    plugins: [
        new CleanWebpackPlugin(['dist']),   //构建前，删除 dist 目录
        new HtmlWebpackPlugin({
            title: 'learn webpack',         // 标题
            template: './src/index.html',   // html 模板
            filename: 'index.html',         // 生成的 HTML 名称
            inject: 'true',                 // 引入生成的 js 文件，false 则不引入
            minify: {
                removeComments : true,      //去掉注释
                collapseWhitespace : true   //去掉空行
            }
        }),
        new ExtractTextPlugin({
            // 从 .js 文件中提取出来的 .css 文件的名称
            filename: 'css/[name]_[contenthash:8].css'
        })
    ]
}