详解vue-loader在项目中是如何配置的

var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
// other options...
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: {
extractCSS: true
}
}
] },
plugins: [
new ExtractTextPlugin("style.css")
]}

上述内容将自动处理 *.vue 文件内的 <style> 提取到style.css文件里面，并与大多数预处理器一样开箱即用。

注意这只是提取 *.vue 文件 – 但在 JavaScript 中导入的 CSS 仍然需要单独配置。

接下来我们再看看如何手动配置：

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
 // other options...
 module: {
  rules: [
   {
    test: /.vue$/,
    loader: 'vue-loader',
    options: {
     loaders: {
      css: ExtractTextPlugin.extract({
       use: 'css-loader',
       fallback: 'vue-style-loader' // 这是vue-loader的依赖
      })
     }
    }
   }
  ] },
 plugins: [
  new ExtractTextPlugin("style.css")
 ]}

此举便将所有 Vue 组件中的所有已处理的 CSS 提取到了单个的 CSS 文件。

如何构建生产环境

生产环境打包，目的只有两个：1.压缩应用代码；2.去除Vue.js中的警告。

下面的配置仅供参考：

// webpack.config.js
module.exports = {
 // ... other options
 plugins: [
  new webpack.DefinePlugin({
   'process.env': {
    NODE_ENV: '"production"'
   }
  }),
  new webpack.optimize.UglifyJsPlugin()
 ]}

当然，如果我们不想在开发过程中使用这些配置，有两种方法可以解决这个问题：

1.使用环境变量动态构建；

例如：

const isDev = process.env.NODE_ENV==='development'

或者：

const isProd = process.env.NODE_ENV === 'production'

2.使用两个分开的 webpack 配置文件，一个用于开发环境，一个用于生产环境。把可能共用的配置放到第三个文件中。

借鉴大牛的经验

这里提供一个网上标准的写法，名字叫做vue-hackernews-2.0，这里是传送门：https://github.com/vuejs/vue-hackernews-2.0

其中共用的配置文件webpack.base.config.js的代码如下：

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const isProd = process.env.NODE_ENV === 'production'								 
 2/5   首页 上一页 1 2 3 4 5 下一页 尾页