Как связать файлы javascript / Jquery Files с помощью веб-пакета? - PullRequest
Новая
       8

Как связать файлы javascript / Jquery Files с помощью веб-пакета?

1 голос
/ 23 октября 2019

Мне удалось успешно связать мои sass-файлы с помощью веб-пакета, но у меня возникли проблемы с упаковкой файлов javascript. То, как я делаю это на css, заключается в том, что точка входа - это ./public/javascript/index.js, которая содержит import '../sass/main.scss';а затем main.scss содержит как @import "layout / header";и многое другое. Вопрос в том, как мне упаковать файлы javascript?

например, у меня есть файлы javascript в \ public \ js \ -> js-файлах здесь, таких как test.js и т. Д.

Я предоставил свою конфигурацию веб-пакета ниже.

Мой конфиг вебпак 

const javascript = {
    test: /\.(js)$/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/env']
        }
    }
}

const images = {
    test: /\.(jpg|jpeg|png|gif)$/,
    use: {
        loader: 'file-loader',
        options: {
            outputPath: '../images/'
        }
    }
}

const postcss = {
    loader: 'postcss-loader',
    options: {
        plugins() { return [ autoprefixer({ browsers: 'last 5 versions' }) ]; }
    }
}

const styles = {
    test: /\.scss$/,
    use: [
        'style-loader',
        MiniCssExtractPlugin.loader,
        'css-loader',
        postcss,
        'sass-loader'
    ]
}

const config = {
    watch: true,
    watchOptions: {
        poll: true,
        ignored: /node_modules/
    },
    entry: './public/javascript/index.js',
    output: {
        path: path.resolve(__dirname, 'public', 'dist'),
        filename: 'main.js'
    },
    module: {
        rules: [
            javascript,
            images,
            styles
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'style.bundle.css'
        }),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: { preset: 'default', discardComments: { removeAll: true } },
            canPrint: true
        })
    ]
}

1 Ответ

2 голосов
/ 23 октября 2019

Webpack - это, по простейшему объяснению, упаковщик javascript. Существуют плагины для поддержки других ресурсов, таких как css, но webpack hello world предоставит вам ваш javascript.

Определяя точку входа, вы просите веб-пакет проследить созданное вами дерево зависимостей модуля с помощью операторов import / require и объединить найденные сценарии в один выходной файл.

Если бы вы создали файл в ./public/javascript с именем "foo.js" и добавили import "./foo"; в файл index.js, вы увидите, что после запуска сборки веб-пакета любойкод, который вы добавляете в foo.js, появится в вашем main.js

...