webpack的使用（样式打包，文件打包）

（一）webpack.config中的配置

const path = require('path'); //node内置模块用来设置路径的

module.exports = {
    //单个入口文件的配置 --- 对应单页面应用程序
    // entry: './src/js/main.js', //文件入口
    // output: {                  //文件出口
    //     path: path.resolve(__dirname, 'dist/js'), //__dirname node内置模块 表示根目录
    //     filename: 'bundle.js', //生成文件名
    //     publicPath: "js/", // string //主要是为了找到js下的图片 （一般用作上线,修改http.../路径）
    // },
    //多个入口文件的配置 --- 对应多页面应用程序
    entry: {
        main: './src/js/main.js',
        main2: './src/js/main2.js',
    }, //文件入口
    output: {                  //文件出口
        path: path.resolve(__dirname, 'dist/js'), //__dirname node内置模块 表示根目录
        filename: '[name].js', //生成文件名
        publicPath: "js/", // string //主要是为了找到js下的图片 （一般用作上线,修改http.../路径）
    },
    //entry: ["",""] 将自己的js文件与第三方js文件相合并
    /**
     entry: {
        jQuery: ["",""],
        oneSelf: './src/js/my.js',
    }
     */
    module: {
        rules: [ //设置模块的匹配规则
            {
                test: /\.css$/, //使用正则表达式 匹配以.css结尾的文件
                use: ['style-loader', 'css-loader'] //使用
            },
            {
                test: /\.(png|jpg|gif)$/, //匹配图片的
                use: [
                    {
                        loader: 'url-loader', //url-loader是file-loader的上层封装
                        options: {
                            limit: 8192 //设置图片大小限定在8kb内 才转化为base64字符串
                        }
                    }
                ]
            }
        ]
    }
};

（二） package.json文件中的配置

其实主要是依赖中的配置

"dependencies": {
  "css-loader": "^0.28.11",
  "file-loader": "^1.1.11",
  "style-loader": "^0.20.3",
  "url-loader": "^1.0.1"
}

（三）最后看项目中的情况自定义些配置

 打包css：npm install css-loader style-loader --sava-dev
 打包图片：npm install file-loader url-loader --sava-dev