webpack开发环境配置相关

Posted 2022-12-02 ~往无前

所谓的开发环境配置就是指在进行打包的时候，只有在程序员开发的时候用得到，一旦上线这些配置将无用。这就是开发环境配置，这个配置，可以极大的提高程序员的开发效率。

一、html-webpack-plugin

这是要一个用来导出的html文件的插件，并且可以将导出的的js文件自动的引入到该文件中，一般该文件导出到导出目录中。

1.安装插件：

npm installl html-webpack-plugin -D

2.文件配置

   entry:
        'first':'./src/index.js',
        'second':'./src/index.js'
    ,
  
	plugins:[
        //plugin的配置
        new HtmlWebpackPlugin(
            template:'./src/index.html',
            title:'123',//生成html文件的标题
            filename:'first.html',//生成html文件的文件名，默认是index.html
            hash:true,      //是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值，添加hash形式
            // chunks:允许插入到模板中的一些chunk，不配置此项默认会将所有的thunk注入到模板中，在配置多个页面时，每个页面注入的thunk应该是不相同的
            //需要通过该配置为不同页面注入不同的thunk;此时的chunks和前面的entry入口文件对应
            chunk:['first']

        )
    ],

二、处理html文件中img图片

之前我们处理过图片资源，但是当我们在html文件中直接导入图片时，是无法被url-loader进行处理的。这时候需要有一个loader来处理这个问题：

1.安装loder

 npm installl html-loader -D

2.文件配置

  rules:[
  			
                test:/\\.html$/,
                //处理html文件的iumg图片(负责引入img。从而能被url-loader进行处理)
                loader:"html-loader"
            ,
          ]

三、打包其他资源

其他资源包括除了html/js/css资源以外的资源，首先需要安装对应的loader

1.安装

	npm install file-loader -D 

2.文件配置

            //打包其他资源（除了html/js/css资源以外的资源）
            
                exclude:/\\.(css|js|html)$/,
                loader:'file-loader',
                options:
                    name:'[hash:10].[ext]',
                    outputPath:'media', //导出的目录
                
            

四、deServer

开发服务器devServer:用来自动化(自动编译，自动打开浏览器，自动刷新浏览器)。
特点：，没有输出，只会在内存中编译打包，不会有任何输出 意思就是不会生成最后的build文件夹，输出让你可视的js包。

启动devServer指令为：npx webpack-dev-server。

使用webpack会将打包结果输出出去。

1.安装deServer

	npm install deServer -D

 devServer:
        contentBase:resolve(__dirname,'build'),
        //启动gzip压缩
        compress:true,
        //端口号
        port:3000,
        //自动打开浏览器
        open:true,
    

除了上面所列的还有之前所讲的css-loader等基本的开发环境配置。这里就不在赘述了。