webpack + artTemplate配置

Webpack 4.x后的版本，已经不支持CommonsChunkPlugin了，更定为SplitChunksPlugin

module.exports = {
    optimization: {
        splitChunks: {
            name: 'vendors',
            chunks: 'initial',
            minChunks: 2
        }
    }
}

ArtTemplate Loader

{
    test: /\.art$/,
    loader: "art-template-loader",
    options: {
        minimize: false
        // art-template options (if necessary)
        // @see https://github.com/aui/art-template
    }
}

图片和字体 Loader

{
    test: /\.(png|svg|jpg|gif)$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                limit: 10,
                name: '[name].[ext]',
                // 生成的图片地址
                outputPath: './images/'
            }
        }
    ]
},
{
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                // 生成的字体地址
                outputPath: './fonts/'
            }
        }
    ]
},

babelrc Loader

// babel-loader配置
{
    test:/\.js$/,
    exclude: /(node_modules|bower_components)/,
    use:[{loader:"babel-loader"}]
}
// 需要单独创建一个`.babelrc`文件：
{ "presets": [ "es2015" ] }

Css, Scss, Postcss Loader

// 配置postcss需要配置下面这个loader
{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: ["css-loader", 'postcss-loader'],
        // 样式中 路径的配置
        publicPath: '../'
    })
},
{
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        //resolve-url-loader may be chained before sass-loader if necessary
        use: ['css-loader', 'postcss-loader', 'sass-loader'],
        // 样式中 路径的配置
        publicPath: '../'
    })
},

// 下面代码需要单独创建一个postcss.config.js
module.exports = {
    plugins: [require('autoprefixer')]  // 引用该插件即可了
}

其他Loader

{
    test: /\.html?$/,
    use: "html-url-loader",
    query: { deep: true }
}
{
    // 增加html的规则
    test: /\.(html)$/,
    use: [
        'html-loader'
    ]
}
{
    test: /\.(csv|tsv)$/,
    use: [
        'csv-loader'
    ]
},
{
    test: /\.xml$/,
    use: [
        'xml-loader'
    ]
}

常用插件

plugins: [
    new CleanWebpackPlugin(['./dist']),
    
    // 全局使用$,jQuery，前提必须要安装jQuery插件
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    }),

    new ExtractTextPlugin({
        filename: 'css/[name].css', //路径以及命名
        ignoreOrder: true
    }),
]