当前位置 : 主页 > 网络编程 > JavaScript >

webpack基本配置

来源:互联网 收集:自由互联 发布时间:2021-06-28
webpack.config_1.js "use strict";const path = require("path");const htmlWebpackPlugin = require("html-webpack-plugin");const webpackConfig = { // 入口 entry: { main: "./src/script/main.js", a: "./src/script/a.js" }, // 出口 output: { pa
webpack.config_1.js
"use strict";
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");

const webpackConfig = {
    // 入口
    entry: {
        main: "./src/script/main.js",
        a: "./src/script/a.js"
    },
    // 出口
    output: {
        path: path.resolve(__dirname, "dist/js"),
        filename: "[name]-[chunkhash].js"
    },

    plugins: [
        new htmlWebpackPlugin({
            filename: path.resolve(__dirname, "a.html"),
            template: "index.html",
            inject: false,
            title: "this is a",
        }),
    ]
};

module.exports = webpackConfig;
webpack.config_2.js
"use strict";
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    // 入口,使用绝对路径
    entry: __dirname + "/src/app.js",
    // 出口
    output: {
        path: path.resolve(__dirname, "dist/js"),
        filename: "[name]-bundle.js"
    },

    module: {
        // 各种loader的使用方法。
        rules: [{
            test: /\.js$/,
            loader: "babel-loader",
            exclude: [path.resolve(__dirname, "node_modules/")],
            include: [path.resolve(__dirname, 'src/')]
        }, {
            test: /\.css$/,
            // style-loader:在html中创建css标签并填充。
            loaders: 'style-loader!css-loader?importLoaders=1!autoprefixer-loader?browsers=last 5 versions',
        }, {
            test: /\.(styl|stylus)$/,
            loaders: 'style-loader!css-loader!autoprefixer-loader!stylus-loader',
        }, {
            test: /\.(png|jpg|gif|svg)$/i,
            loaders: "file-loader"
        }]
    },
    // 插件基本使用方法。
    plugins: [
        new htmlWebpackPlugin({
            filename: path.resolve(__dirname, "index.html"),
            inject: "body",
            title: "this is a!!!",
        }),
    ]
};
网友评论