//webpack.config.js var path = require('path') var webpack = require('webpack') const VueLoaderPlugin = require('vue-loader/lib/plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require("mini-css-extract-plugin") module.exports = { entry: function () { //开发模式和生产模式下不同的入口 if (process.env.NODE_ENV == 'development'){ return { 'main': './src/main.js' } } else{ return { 'my-first-vue-component': './src/components/myFirstVueComponent/index.js' } } }, output: { path: path.resolve(__dirname, './dist'), publicPath: process.env.NODE_ENV == 'development'? '/dist/':'./', //加入到html中外部文件的路径 filename: '[name].js', }, //optimization,判断是什么环境,如果直接 splitChunks ,只有在生产模式下才单独生成组件的js optimization:process.env.NODE_ENV == 'development'? {}:{ minimize: false, splitChunks: { // 自动提取所有公共模块到单独 bundle chunks: 'all' } } , plugins:[ new VueLoaderPlugin(), new MiniCssExtractPlugin( //css 文件的插件和配置文件名格式 { filename: 'css/[name].[contenthash:8].css', chunkFilename: 'css/[name].[contenthash:8].css' } ), ], module: { rules: [ { test: /\.css|scss$/, // use: [ // 'vue-style-loader', // 'css-loader' // ], use: [ //一定要这样设置才会生成外部的CSS https://github.com/webpack-contrib/mini-css-extract-plugin/issues/113 MiniCssExtractPlugin.loader, 'css-loader?sourceMap', 'sass-loader?sourceMap' ] }, { test: /\.vue$/, // loader: 'vue-loader', loader: [ //配置vue中css的提取 { loader: 'vue-loader', options: { loaders: { scss: [ 'vue-style-loader', MiniCssExtractPlugin.loader, 'css-loader?sourceMap', 'sass-loader?sourceMap' ], css: [ 'vue-style-loader', MiniCssExtractPlugin.loader, 'css-loader?sourceMap' ] } } } ] }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]', outputPath:'images/' , //打包后图片输出的位置 dist\images } } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['*', '.js', '.vue', '.json'] }, devServer: { // contentBase: './dist', historyApiFallback: true, noInfo: true, overlay: true }, performance: { hints: false }, // devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { // module.exports.devtool = '#source-map' //不生成 .map // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new HtmlWebpackPlugin({ //外部的html文件,在文件中加入生成的js和css title: 'Multi Entry', template: './index.html', filename: 'index.html', chunks:['my-first-vue-component'] }), // new webpack.optimize.UglifyJsPlugin({ //压缩 // sourceMap: true, // compress: { // warnings: false // } // }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) } else{ module.exports.devtool= '#eval-source-map' }
webpack4 mini-css-extract-plugin vue组件 导出组件js和css 到文件
最新推荐文章于 2024-08-09 07:30:56 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)