标签：index dist 分类 loader webpack publicPath 打包 css png

打包文件分类

我们的文件不能都放在一个文件夹下，所以需要不同的文件夹进行管理

分离图片

{
    test: /\.(png|jpe?g|gif)$/i,
	use: [
            {
                loader: 'url-loader',
                options:{
                    outputPath: 'images',//设置路径
                    limit:1,
                    esModule:false
                }
            },
        ],   
}

分离css文件

 new MiniCssExtractPlugin({
     filename:'css/main.css'
})

此时打包出 的dist文件目录如下

|dist

​ |-css

​ |-main.css

​ |-image

​ |-351651054.png

​ |-index.html

​ |-index.js

添加服务器域名 publicPath

若想给所有的资源都加上

output: {
        filename: 'index.js',//文件名
        path: path.resolve(__dirname, 'dist'),//路劲,
        publicPath:'http://www.windeyes/'//加公共路径
    },

只给图片资源加上

{
    test: /\.(png|jpe?g|gif)$/i,
    use: [
            {
                loader: 'url-loader',
                options:{
                    outputPath: 'images',//设置路径
                    publicPath:'http://122454/',
                    limit:1,
                    esModule:false
                }
            },
        ],
}

标签：index,dist,分类,loader,webpack,publicPath,打包,css,png
来源： https://www.cnblogs.com/axu1997/p/12833775.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。