webpack打包

前提：安装并配置好nodejs、webpack；项目文件夹下创建dist及src文件夹，项目在src文件夹中

一、项目文件夹下载模块

1、处理html模块

任务管理器运行：

npm i html-webpack-plugin --save-dev

2、处理css模块

任务管理器运行：

npm i style-loader css-loader --save-dev

3、处理less模块

任务管理器运行：

npm i less-loader less --save-dev

4、处理sass模块

任务管理器运行：

npm i sass-loader node-sass --save-dev

二、项目文件夹配置打包文件

var path = require('path');
// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode:'development',
    //自定义文件名
    entry:path.resolve(__dirname,'./src/index.js'),//模板路径，即我们自己的js文件
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:'bundle.js'//自动生成的js文件的名称
    },
    
    //后台自动打包
    devServer:{static:'./src',
    open:true, //自动打开
    port:3030, //端口号
    host:'127.0.0.1' //域名
    },

    //打包html文件
    plugins:[
        new htmlWebpackPlugin({
        template:path.resolve(__dirname, 'src/index.html'),//模板路径，即我们自己的html文件
            filename:'index.html'//自动生成的html文件的名称
        })
    ],

    //打包其他文件
    module: { 
        rules: [ // 文件的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //处理css文件的规则
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, //处理less文件的规则
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } //处理sass文件的规则
        ]
        
    }

}

注：可在dist文件夹生成xxx.js   xxx.html文件，若要单独生成css或其他文件请参照其他各路大神。