webpack4的一些配置

index.js

// ************
// ************
// ************
// ************

// 热更新
if(module.hot){
    module.hot.accept();
}

webapck.config.js

// 基于node的  遵循commonjs规范的
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');
let webpack = require('webpack');
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
// 分别抽离出不同的css文件
let LessExtract = new ExtractTextWebpackPlugin('css/less.css');
let CssExtract = new ExtractTextWebpackPlugin('css/css.css');
module.exports = {
    entry: './src/index.js', // 入口
    // entry:['./src/a.js','./src/b.js'],  // 当两个js文件没有使用require关联又需要将两个文件打包到一起时,可以使用数组的方式 
    // entry:{

    // },
    output: {
        filename: 'build.[hash:8].js', // 打包后的文件名
        path: path.resolve('./build') // 这个路径必须是绝对路径
    }, // 出口
    devServer: {
        contentBase: "./build", // 服务器默认文件夹
        port: 3456, // 服务器端口号
        compress: true, // 服务器压缩
        open: true, // 自动打开浏览器
        hot: true // 开启热更新
    }, // 开发服务器
    module: {
        rules: [
            // {test:/\.css$/,use:['style-loader','css-loader']}
            {
                test: /\.css$/, // 匹配CSS文件
                // use: ExtractTextWebpackPlugin.extract({
                use: CssExtract.extract({
                    use: [
                        // style-loader 是在页面中插入style标签用的 , 
                        // 抽离单独的css文件使用link引用,就不需要使用 'style-loader' 模块了
                        // {    
                        //     loader: "style-loader",
                        //     // options: ''   // 传参使用
                        // },
                        {
                            loader: "css-loader",
                            // options: ''  // 传参使用
                        }
                    ]
                })
            },
            {
                test: /\.less$/, // 匹配less文件
                // use: ExtractTextWebpackPlugin.extract({
                use: LessExtract.extract({  // 抽离less的css文件
                    use: [
                        // style-loader 是在页面中插入style标签用的 , 
                        // 抽离单独的css文件使用link引用,就不需要使用 'style-loader' 模块了
                        // {
                        //     loader: "style-loader",
                        //     // options: ''   // 传参使用
                        // },
                        {
                            loader: "css-loader",
                            // options: ''  // 传参使用
                        },
                        {
                            loader: "less-loader",
                            // options: ''  // 传参使用
                        }
                    ]
                })
            }
        ]
    }, // 模块配置
    plugins: [
        LessExtract,
        CssExtract,
        new ExtractTextWebpackPlugin({
            // 抽离出来的文件地址及文件名
            filename:'css/index.css'
        }),
        // 热更新插件
        new webpack.HotModuleReplacementPlugin(),
        // index.js 中: -->
        // if(module.hot){
        //     module.hot.accept();
        // }
        // 清除文件插件
        new CleanWebpackPlugin([
            './build' // 清除 './build' 文件夹下所有文件重新生成
        ]),
        // 打包html插件
        new HtmlWebpackPlugin({
            template: './src/index.html', // 要打包的原始文件
            title: "webpack学习", // 在打包前的html中引用title -- <%= htmlWebpackPlugin.options.title %> 固定写法
            // minify:{
            //     removeAttributeQuotes:true, // 删除标签属性中不必要的引号
            //     collapseWhitespace:true // 折叠多余空号
            // }
            hash: true, // 打包的文件名后加哈希值,清除缓存
        })
    ], // 插件配置
    mode: 'development', // 打包模式 development-开发模式 
    resolve: {} // 配置解析
}

// 1. 在webpack中如何配置开发服务器 -- webpack-dev-server
// 'npm install webpack-dev-server -D'
// 在 package.json 的 scripts 中配置

// 2. webpack 插件
//  1).将html打包到build下可以自动引入生产的js
//      'npm install html-webpack-plugin -D'
//

// 3. 抽离样式
// extract-text-webpack-plugin@next (@next表示是webpack4用) (可能会被  'mini-css-extract-plugin' 取代)