webpack4.x+vue2.x的配置

^_^的我 9月前 ⋅ 351 阅读

webpack4.x+vue2.x基础配置

const path = require('path');
// 将打包的js插入index.html文件中
const HtmlWebpackPlugin = require('html-webpack-plugin');
// vue打包组件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// 样式抽出组件
// const cleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: `js/bundle${Math.random()}.js`
  },
  module: {
    rules: [
        {
            test: /\.css$/,
            // use: ['vue-style-loader', 'css-loader']
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    {
                        loader: 'css-loader',
                        options: {
                            url: false
                        }
                    }
                ]
            })
        },
        {
            test: /\.scss$/,
            use: ["vue-style-loader", "css-loader", "sass-loader"]
        },
        {
            test: /\.(png|jpg|jpeg|gif|bmp)$/,
            use: ['file-loader?limit=7000&name=build/image/[name].[ext]']
        },
        {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {
                    scss: 'vue-style-loader!css-loader!sass-loader',
                    sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
                },
                extractCSS: true
            },
            // use: ExtractTextPlugin.extract({
            //     fallback: "style-loader",
            //     use: "css-loader"
            // })
        }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './index.html'}),
    new VueLoaderPlugin(),
    new ExtractTextPlugin({
        filename: `css/css${Math.random()}.css`
    })
  ]
};

webpack自写打包

  • 发布打包使用
const webpack = require("webpack");
const webpackConfig = require('./webpack.config');
const compiler = webpack(webpackConfig);

compiler.run((err, status) => {
    if (err) {
        console.error(err);
        return ;
    }

    console.log(status.toString({
        errors: true,
        warnings: true,
        modules: false,
        chunks: false,
        colors: true

    }));
});
  • 开发调试阶段使用
compiler.watch({
    aggregateTimeout: 300,
    poll: undefined
}, (err, status) => {
    if (err) {
        console.error(err);
        return ;
    }
    
    console.log(status.toString({
        errors: true,
        warnings: true,
        modules: false,
        chunks: false,
        colors: true
    }));
});

全部评论: 0

    我有话说: