11月24, 2016

webpack之publicPath

之前在用gulp-connect的时候,有碰到过这样一个问题,比如下面的目录结构:

menu

假设root的配置为demo,那我如果想用和demo平级的dist文件夹下的文件,那么就不可以了。

不确定这样写行不行:

root: ["demo", "dist"]

不过个人感觉应该不行。

而webpack在做这一块上面,比较方便。配置简单如下:

var openBrowserWebpackPlugin = require("open-browser-webpack-plugin"),
    ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: "./src/js/dui.js",
    output: {
        path: __dirname + "/dist/", // 输出文件的保存路径
        publicPath: "/dist/",
        filename: "js/dui.js", // 输出文件的名称
        library: "Dui",
        libraryTarget: "umd"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ["babel?presets[]=es2015"],
                exclude: /node_modules/
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader", {publicPath: "../"})
            }
        ]
    },
    devServer: {
        stats: { colors: true },
        publicPath: "/dist/",
        contentBase: "demo",
        port: 8090,
        watch: true,
        progress: true,
        "display-error-details": true
    },
    plugins: [
        new ExtractTextPlugin("css/dui.css"),
        new openBrowserWebpackPlugin({ url: "http://localhost:8090" })
    ]
}

之前也提过,我最近在写的组件项目,用到了三个构建工具:FIS、gulp、webpack,想想确实也不是太合理。最终还是去掉了FIS。

不过感受下来,就是webpack,如果针对页面级的写代码,而不是模块化的css、js,还是FIS开发来的爽。

本文链接:www.my-fe.pub/post/webpack-publicPath.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。