使用webpack打包js文件,html文件和图片

先创建一个文件夹,然后点这个文件夹右键选择在终端打开,执行npm init命令创建包名作者名之类的,完事之后在总文件夹上再执行npm install webpack webpack－cli __save_devc下载webpack插件，在package.json的scripts里面添加一个'build':"webpack"，然后在总文件夹上创建一个html文件，再创建一个项目文件夹src，src里面创建一个js文件当做入口，暂定为main.js，src上再创建一个js文件夹放所有的js文件，然后在总文件夹创建一个webpack.config.js文件，在webpack.config.js上编辑，

let path=require('path') //引入path模块
let htmlpackplu=require('html-webpack-plugin')//引入HTML模块
let htmlpack=new htmlpackplu({ 
    template:'./index.html', //html文件路径
    filename:'index.html' //打包后的名字
})
module.exports={
    entry:'./src/main.js', //入口文件
    output:{  //打包完成后的选项
        publicPath:"./", // 设置静态路径
        filename:'okpack.js', //打包之后的js文件名
        path:path.resolve(__dirname,'wenjianjia') //两个参数，第一个是打包后的文件夹存放位置，__dirname代表根目录，第二个代表生成的新的js文件所在的文件夹的路径
    },
    plugins:[htmlpack,vueplugins], //打包html所需要的插件
    module:{
        rules:[
            {
                test:/\.css$/, //查找所有的css文件
                use:['style-loader','css-loader'] //需要用到的插件，下载命令为npm i style-loader css-loader
            }，  //这里面写的是打包css文件所用到的东西
        {   
          test:/\.(jpg|png|gif)&/,  //查找所有图片
          loader:"url-loader",// 打包图片需要用到 url-loader file-loader
          options:{
            limit:80*1024 //打包完图片大小限制
          }
        },{
          test:/\.html$/,
          // 处理html中图片问题，负责引入从而可以时img标签加载图片
          loader:"html-loader"
        }，
        ]
    }
}
css文件打包的话还需要在main.js这个入口文件上先用import  'css文件路径'，这个方法导入，然后在终端再运行npm run build就可以了