Куски Webpack в отдельной папке

Я хочу реализовать функцию разделения кода в своем приложении. Я разделяю свое приложение по маршрутам, и для каждого маршрута я использую require.ensure для импорта компонента. Я пытаюсь поместить все куски в папку кусков, поэтому я меняю вывод в файле конфигурации:

output: {
   filename: "chunks/bundle[name].js"
}

Но у меня ошибка 404.

Ошибка: не удалось загрузить фрагмент 2 в HTMLScriptElement.onScriptComplete.

Поэтому я оставляю его в папке, где у меня есть файл пакета:

var webpack = require("webpack");
module.exports = {
    entry: "./js/app.js",
    output: {
        filename: "./bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: "vue-loader"
            },
            {
                test: /\.js$/,
                loader:"babel-loader"                
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: "file-loader?name=element-ui/[name].[ext]"
            }       
        ]
    },
    resolve: {
        extensions: [ ".json", ".js", ".vue", ".css" ]
    },
    watch: true
};

Теперь работает, но я получил такую ​​структуру чанка: структура чанка папки. Как я могу переместить все эти куски только в одну папку. И это правильный способ использования функции разделения кода.

Я думаю, что я что-то упускаю. Пожалуйста помоги!


webpack webpack-2
person Klark    schedule 21.02.2017    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Прежде всего, включите модуль пути в начало файла webpack.config:

var path = require("path");

Поскольку у вас есть несколько файлов фрагментов, ваша точка вывода должна иметь свойства filename и chunkFilename с [name] или [id]. Проблема со структурой файла заключается в том, что вы не определили publicPath:

output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'dist/',
    chunkFilename: '[name].js'
}

Теперь каждый файл фрагмента и другие пакеты, такие как файлы main.js, vendor, manifest, будут находиться в папке dist/. Вот пример файла webpack.config.js.

person t_dom93    schedule 23.02.2017