1

我正在使用 Webpack 1.12.0 构建一个 Vue 组件。我的目标是为我的包创建一个[name].min.js文件和[name].min.css文件。

我尝试使用extract-text-webpack-plugin将 css 提取到单个文件并按照 Webpack 1.x 的说明进行操作：https ://vue-loader.vuejs.org/en/configurations/extract-css.html

这是我的webpack.base.conf.js文件：

var path = require('path')

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/',
    filename: 'build.js',
  },
  resolve: {
    extensions: ['', '.js', '.vue'],
    alias: {
      vue$: 'vue/dist/vue.common.js',
      components: path.resolve(__dirname, '../src/components'),
    },
  },
  resolveLoader: {
    root: path.join(__dirname, 'node_modules'),
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue',
      },
      {
        test: /\.js$/,
        loader: 'babel!eslint',
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json',
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
      },
    ],
  },
}

这是我的webpack.prod.conf.js文件，用于创建上面的这 2 个文件：

var webpack = require('webpack')
var config = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin');

config.target = 'node'
config.output.filename = '[name].min.js'
config.output.libraryTarget = 'commonjs2'

config.entry = './src/components/[name].vue'

var SOURCE_MAP = true

config.devtool = SOURCE_MAP ? 'source-map' : false

config.vue = {
  loaders: {
    css: ExtractTextPlugin.extract("css"),
  }
},

config.plugins = (config.plugins || []).concat([
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: '"production"'
    }
  }),

  new ExtractTextPlugin("[name].min.css"),

  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  }),

  new webpack.optimize.OccurenceOrderPlugin()
])

module.exports = config

我的文件夹结构是：

├── build
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── dist
├── package.json
├── src
│   ├── App.vue
│   ├── components
│   │   ├── [name].vue
│   │   ├── script.js
│   │   ├── style.css
│   │   └── template.html
│   ├── index.html
│   ├── main.js
└── yarn.lock

该[name].vue文件包含script.js,style.css和template.html

<template src="./template.html"></template>

<script src="./script.js"></script>

<style src="./style.css"></style>

要运行的命令是 webpack --progress --hide-modules --config build/webpack.prod.conf.js

但是，当我运行这个命令时，只有[name].min.js和[name].min.js.map被创建。没有[name].min.css。我可以做些什么来创建 css 文件？

4

0 回答 0