webpack环境安装：

npm install webpack webpack-cli -g//不指定版本,默认下载最新版本,全局安装以后直接使用

mkdir webpack-demo  //创建项目文件夹,随意名字同js变量名规则

cd webpack-demo  //进入项目文件夹

npm init -y  //生成项目配置文件

创建一个webpack.config.js的打包配置文件

webpack.config.js配置文件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={	 
    // 1.项目入口配置
    context: __dirname, 
    // 单入口   输出时默认为main.js
    entry:"./index.js",  //相对于context的路径 
    // 多入口
    // entry: {
	// 	a: './test.js',      //输出时默认为a.js
	// 	b: './test2.js',     //输出时默认为b.js
	// 	test3: './test3.js'  //输出时默认为test3.js
	// }
    

    // 2.项目出口配置
    output: {
		asyncChunks: true, //创建按需加载的异步 chunk。
		
		path:__dirname+"/dist2",//输出的目录,绝对路径,默认dist
		
		// filename: 'bundle.js', //输出的文件名
		filename: '[name]-666-[id]bundle[hash:5].js',
        //输出的文件名,[hash:5]为5位哈希值,[id]为打包的chunk的id,[name]为入口的属性名,缺少则为mian
        
        // library: 'tutoule',库名
		// library: {
		// 	name: 'MyLibrary', //库名
		// 	type: 'var', //配置将库暴露的方式。
        // },

        //各种模块化导出技术的统一注释(把type设置为umd)
        // auxiliaryComment: 'Test Comment',

        // 在生成文件之前清空 output 目录
        clean: true, 
        // clean: {
		// 	keep: /ignored\/dir\//,
        // }    保留 'ignored/dir' 下的静态资源不删
    },
    
    // 3.加载器配置
    module: {
        rules: [
            //直接以style标签形式动态写入到页面 npm install css-loader   style-loader  --save-dev
            {test:/\.css$/,use:["style-loader","css-loader"]},
            //项目中引入了以下结尾的文件就会启动file-loader     npm i file-loader --save-dev
            {test:/\.jpg$/,use:["file-loader"]},
            // 引入了scss   npm install sass-loader sass webpack --save-dev
            {test:/\.s[ac]ss$/i,use:["style-loader","css-loader","sass-loader"]},
            // 引入ts       npm install ts-loader  webpack typescript  --save-dev
            {test:/\.ts$/,use:"ts-loader"},
        ]
    },

    
    // 4.插件配置
    plugins: [new HtmlWebpackPlugin({
        title: "plugins", //html的标题默认为"Webpack App",
        filename: "test.html", //模板html打包后生成的文件名,放在output.path里面,默认"index.html"
        template: __dirname + "/index.html", //模板html文件的路径,
        inject: "body", //'head' || 'body' 打包后的bundle挂载到模板html的位置:'body' 放置在body元素的底部。'head'将把脚本放在head元素中。,
        publicPath: "./", //The publicPath used for script and link tags,
        // favicon:__dirname + "/public/favicon.ico", //打包前前前小图标的路径,默认为:"",
        //"洗澡":压缩项配置
        // minify:true,
        minify: {
            collapseWhitespace: true, //是否压缩HTML:空格回车
            keepClosingSlash: true,//在单元素上保留末尾的斜杠
            removeComments: true, //是否清除HTML注释  
            removeRedundantAttributes: true,
            removeScriptTypeAttributes: true, //是否删除script的type属性(这个属性对于现代浏览器没啥用)
            removeStyleLinkTypeAttributes: true, //是否删除< style>和< link>的type="text/css"  
            minifyJS: false, //是否压缩页内JS  ,
            minifyCSS: true //是否压缩页内CSS  
        },
        cache:true,//仅当文件被更改时才重新打包,否则使用上一次打包时缓存起来的,默认true
    })],

        // 5.开发环境配置,devServer当文件发生修改，通知各个模块进行更新加载，加载到计算机内存(内存刷新 比磁盘刷新反应快)，刷新浏览器
    devServer: {
        //告诉dev-server在服务器启动后打开浏览器。将其设置为true以打开默认浏览器。但是:如果你的电脑有防火墙或者有管理员权限的限制或者电脑很卡 可能不会自定打开浏览器
        open: true, //cli中 webpack serve --open					
                            
        //本地服务器监听的端口
        port: 8080,
            
        //启用热更新,直接使用webpack的热更新模块.就是改了代码自动打包后自定刷新浏览器页面:bug就是同open,记住 卡了就刷新一下不用纠结
        //热更新使得开发调试效率更高
        hot: true,
            
        //指定要使用的主机(localhost|ipv4|ipv6)。如果你想让你的服务器可以被外部访问,像这样指定:
        //让你同桌访问 然后你改项目代码 他就会刷新
        host: '192.168.12.111',
            
        //启用gzip压缩
        compress: true,
                
        //代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现)
        //自动配置代理 比手动设计代理服务器更方便
        proxy: {
            '/api': 'http://localhost:7001',
        },
        // proxy: {
        //      '/api': {
        //        target: 'http://localhost:7001',
        //        secure:true,//如果代理的target是https接口,需要配置它 
        //        pathRewrite: { '^/api': '/chongxie' },//请求时重写pathname
        //      },
        //    },
    }		
}