webpack打包普通项目 publicPath配置

webpack打包普通项目

描述：这几天正在研究webpack打包 想试一下 非vue项目如何打包
完整代码 https://github.com/wangjing12345678/webpack_normal

1. 目录结构

js、css、image都放在static文件夹下 views用来放html页面
最终打包后的目录为dist 可以看出其结构都是一致的

2.webpack.config.js文件

const path = require('path');
const HTMLPlugin = require('html-webpack-plugin'); //插件打包html
let ExtractTextPlugin = require('extract-text-webpack-plugin'); //插件打包css
const webpack = require('webpack');
let env = process.env.NODE_ENV;
console.log(env);

var config = ''
if (env == 'development') {
    config = {
        mode: 'development',
        entry: {
            index: path.join(__dirname, 'static/js/index.js'),
            er: path.join(__dirname, 'static/js/er.js'),
        },
        output: {
            publicPath: '/',
            filename: 'static/js/[name].js', // 文件输出
            path: path.join(__dirname, 'dist')
        },
        module: {
            rules: [
                {
                    test: /\.css$/, // 处理css文件
                    use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: "css-loader"
                    })
                },
                {
                    test: /\.(gif|jpg|jpeg|png|svg)$/, // 处理图片文件
                    use: [
                        {
                            loader: 'url-loader',
                            options: {
                                limit: 1024,
                                name: 'static/image/[name].[ext]',
                            }
                        }
                    ]
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin("./static/css/index.css"),
            new HTMLPlugin({ // 打包输出HTML
                filename: 'views/index.html',
                template: './views/index.html',
                minify: { // 压缩HTML文件
                    removeComments: true, // 移除HTML中的注释
                    collapseWhitespace: true, // 删除空白符与换行符
                    minifyCSS: true// 压缩内联css
                },
                chunks: ['./js/index']
            }),
            new HTMLPlugin({ // 打包输出HTML
                filename: 'views/second.html',
                template: './views/second.html',
                minify: { // 压缩HTML文件
                    removeComments: true, // 移除HTML中的注释
                    collapseWhitespace: true, // 删除空白符与换行符
                    minifyCSS: true// 压缩内联css
                },
                chunks: ['./js/er']
            }),
        ]
    }
} else {
    config = {
        mode: 'production',
        entry: {
            index: path.join(__dirname, 'static/js/index.js'),
            er: path.join(__dirname, 'static/js/er.js'),
        },
        output: {
            publicPath: '../../',
            filename: 'static/js/[name].js', // 文件输出
            path: path.join(__dirname, 'dist')
        },
        module: {
            rules: [
                {
                    test: /\.css$/, // 处理css文件
                    use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: "css-loader"
                    })
                },
                {
                    test: /\.(gif|jpg|jpeg|png|svg)$/, // 处理图片文件
                    use: [
                        {
                            loader: 'url-loader',
                            options: {
                                limit: 1024,
                                name: 'image/[name].[ext]',
                                outputPath:'static/',
                            }
                        }
                    ]
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin("./static/css/index.css"),
            new HTMLPlugin({ // 打包输出HTML
                filename: 'views/index.html',
                template: './views/index.html',
                minify: { // 压缩HTML文件
                    removeComments: true, // 移除HTML中的注释
                    collapseWhitespace: true, // 删除空白符与换行符
                    minifyCSS: true// 压缩内联css
                },
                chunks: ['./js/index']
            }),
            new HTMLPlugin({ // 打包输出HTML
                filename: 'views/second.html',
                template: './views/second.html',
                minify: { // 压缩HTML文件
                    removeComments: true, // 移除HTML中的注释
                    collapseWhitespace: true, // 删除空白符与换行符
                    minifyCSS: true// 压缩内联css
                },
                chunks: ['./js/er']
            }),
        ]
    }
}


module.exports = config;

extract-text-webpack-plugin插件是用来打包css文件的 因为最终想把css文件抽离出来所以使用了这个插件
这里着重说下 output中的 publicPath如何配置（这里配置不对的话 有可能css中引图片路径会有问题）

首先 我的image最终输出目录是 static/image/[name].[ext] 也就是dist下的static/image 文件夹
在本地开启服务是通过webpack-dev-server
"dev": “cross-env NODE_ENV=development webpack-dev-server --open --host 127.0.0.1 --port 3000”,
那么 npm run dev 之后我的访问index.html的路径是

image的访问路径应该是http://127.0.0.1:3000/static/image/00-go.png
我在css文件中引入背景图片路径为

.test{
    width: 200px;
    height: 300px;
    background-image: url("../image/00-go.png");
}

development下我配置的

 output: {
            publicPath: '/',
            filename: 'static/js/[name].js', // 文件输出
            path: path.join(__dirname, 'dist')
},

那么就是说开启服务后图片资源的路径是 publicPath+图片输出路径
’/’+static/image/[name].[ext]
此时npm run dev 页面显示没有问题

打包后图片路径配置

由于我打包后没有放在服务器上 直接打开浏览器所以 图片路径引入需要配置
打包后直接打开 views/index.html 页面路径是

production下
由于图片输出路径为 static/image/[name].[ext]
那么在css文件中应该引入图片路径为

.test{
    width: 200px;
    height: 300px;
    background-image: url(../../static/image/00-go.png);
}

所以 应该是

output: {
            publicPath: '../../',
            filename: 'static/js/[name].js', // 文件输出
            path: path.join(__dirname, 'dist')
        },