[email protected] dev: `webpack-dev-server --hot --config build/webpack.dev.js`

npm run dev 报错 [email protected] dev: webpack-dev-server --hot --config build/webpack.dev.js
问题主要是webpack的版本与项目现有node_modules中的安装包版本起了冲突。主要看webpack的配置文件。

我是在把iview从3.5.1升到4.0.0版本后，运行npm run dev 报错。后来把iview版本降回到以前的版本，还是报这个错误。当时感觉莫名其妙，怎么只是升级了ivew版本，项目就运行不起来了。后来看到了下面这句话，大概明白为啥webpack版本会改变了。图片网址：前端-基于iview及webpack的框架搭建

解决办法：webpack.common.js文件修改：去掉 patterns

new CopyWebpackPlugin({
	patterns:[
		{
			from: "./src/assets/tinymce",
			to: "tinymce"
		}
	]
}

改为：

new CopyWebpackPlugin([
	{
		from: "./src/assets/tinymce",
		to: "tinymce"
	}]
)

修改的是tinymce插件拷贝到dist文件下。
webpack的常用扩展copy-webpack-plugin
默认webpack打包不会把静态资源复制到dist文件夹下，此插件可以在webpack打包完成后会把静态资源复制到dist文件夹下。
安装：npm install copy-webpack-plugin --save-dev

配置：

const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
    mode: "development",
    devtool: "source-map",
    output: {
        filename: "scripts/[name].[chunkhash:5].js"
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        }),
        new CopyPlugin([
            { from: "./public", to: "./" }
        ])
    ]
}

以下与上面内容无关：
webpack.config.js

var webpack = require('webpack')
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js')

module.exports = {
    //插件项
    plugins: [commonPlugin]
    //页面入口文件配置
    entry: {
        index : './src/js/page/index.js'
    },
    //入口文件输出配置
    output: {
        path:'dist/js/page',
        filename: '[name].js'
    }
    module: {
        //加载器配置
        loaders: [
          { test: /\.css$/, loader: 'style-loader!css-loader' },
          { test: /\.js$/, loader: 'jsx-loader?harmony' },
          { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
          { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    //其它解决方案配置
    resolve: {
        //查找module的话从这里开始查找
        root: 'E:/github/flux-example/src', //绝对路径
        //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: ['', '.js', '.json', '.scss'],
        //模块别名定义，方便后续直接引用别名，无须多写长长的地址
        alias: {
            AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }
};

plugins是插件项，这里我们使用了一个CommonsChunkPlugin 的插件，它用于提取多个入口文件的公共脚本部分，然后生成一个common.js来方便多页面之间进行复用。

entry是页面入口文件配置，output是对应输出项配置（即入口文件最终要生成什么名字的文件、存放到哪里）

webpack.base.conf.js

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')

var env = process.env.NODE_ENV
// check env & config/index.js to decide whether to enable CSS source maps for the
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd

// 配置文件的内容需要通过module.exports暴露
module.exports = {

  // 配置需要打包的入口文件，值可以是字符串、数组、对象。
  // 1. 字符串： entry： './entry'
  // 2. 字符串： entry：[ './entry1','entry2'] (多入口)
  // 3. 对象：   entry： {alert/index': path.resolve(pagesDir, `./alert/index/page`)}
  // 多入口书写的形式应为object，因为object,的key在webpack里相当于此入口的name,
  entry: {
    app: './src/main.js'
  },
  output: {

    // 输出文件配置，output 输出有自己的一套规则，常用的参数基本就是这三个
    // path: 表示生成文件的根目录 需要一个**绝对路径** path仅仅告诉Webpack结果存储在哪里
    path: config.build.assetsRoot,

    // publicPath 参数表示的是一个URL 路径（指向生成文件的跟目录），用于生成css/js/图片/字体文件
    // 等资源的路径以确保网页能正确地加载到这些资源.
    // “publicPath”项则被许多Webpack的插件用于在生产模式下更新内嵌到css、html文件里的url值.
    // 例如，在localhost（即本地开发模式）里的css文件中边你可能用“./test.png”这样的url来加载图片，
    // 但是在生产模式下“test.png”文件可能会定位到CDN上并且你的Node.js服务器可能是运行在HeroKu上边的。
    // 这就意味着在生产环境你必须手动更新所有文件里的url为CDN的路径。
      //开发环境：Server和图片都是在localhost（域名）下
      //.image { 
      // background-image: url('./test.png');
      //}
      // 生产环境：Server部署下HeroKu但是图片在CDN上
      //.image { 
      //  background-image: url('https://someCDN/test.png');
      //}
![](http://images2015.cnblogs.com/blog/1108527/201703/1108527-20170304195944626-432609161.png)


    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
    
    // filename 属性表示的是如何命名出来的入口文件，规则是一下三种： 
    // [name] 指代入口文件的name，也就是上面提到的entry参数的key，因此，我们可以在name里利用/，即可达到控制文件目录结构的效果。
    // [hash]，指代本次编译的一个hash版本，值得注意的是，只要是在同一次编译过程中生成的文件，这个[hash].js 
    //的值就是一样的；在缓存的层面来说，相当于一次全量的替换。
    filename: '[name].js'
  },

  // 用来配置依赖文件的匹配，如依赖文件的别名配置、模块的查找目录、默认查找的
  // 文件后缀名
  // resolve.root 该选型用来制定模块查找的根路径，必须为**绝对路径**，值可以
  // 是路径字符串或者路径数组若是数组，则会依次查找
  resolve: {
    extensions: ['', '.js', '.vue', '.json'],
    fallback: [path.join(__dirname, '../node_modules')],

    // 用来配置依赖文件的别名，值是一个对，该对象的键是别名，值是实际路径
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components')
    }
  },
  resolveLoader: {
    fallback: [path.join(__dirname, '../node_modules')]
  },

  // 用来进行模块加载相关的配置
  module: {
    preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      }
    ],
    loaders: [
      // webpack拥有一个类似于插件的机制，名为Loader，通过Loader，webpack能够针对每一种特定的资源做出相应的处理
      // 1.test参数用来指示当前配置项针对哪些资源，该值应是一个条件值(condition)。
      // 2.exclude参数用来剔除掉需要忽略的资源，该值应是一个条件值(condition)。
      // 3.include参数用来表示本loader配置仅针对哪些目录/文件，该值应是一个条件值(condition)。
      // 而include参数则用来指示目录；注意同时使用这两者的时候，实际上是and的关系。
      // 4.loader/loaders参数，用来指示用哪个或哪些loader来处理目标资源，这俩货
      // 表达的其实是一个意思，只是写法不一样，我个人推荐用loader写成一行，多个
      // loader间使用!分割，这种形式类似于管道的概念，又或者说是函数式编程。形
      // 如loader: 'css?!postcss!less'，可以很明显地看出，目标资源先经less-loader
      // 处理过后将结果交给postcss-loader作进一步处理，然后最后再交给css-loader。
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
      // expose-loader，这个loader的作用是，将指定js模块export的变量声明为全局变量
      {
        test: require.resolve('jquery'),  // 此loader配置项的目标是NPM中的jquery
        loader: 'expose?$!expose?jQuery', // 先把jQuery对象声明成为全局变量`jQuery`，再通过管道进一步又声明成为全局变量`$`
      },
    ]
  },
  eslint: {
    formatter: require('eslint-friendly-formatter')
  },
  vue: {
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),

    // 解决.vue中文件style的部分一些特性解析，比如scoped
    postcss: [

      require('autoprefixer')({
        browsers: ['last 2 versions']
      })
    ]
  }
}