webpack开发Vue配置

一直以来使用webpack都是用的别人的配置，这几天自己学习了一下。

项目地址：https://github.com/donghaohao...

新建整个工程

1. npm init

2. 安装依赖，这里我们开发vue项目，npm install vue --save，然后是开发时的依赖npm install --save-dev

3. 这里有个重点是写package.json里面的scripts，因为我们要分开发环境和生产环境。开发环境使用webpack-dev-server热替换，生产环境需要压缩，加hash等。使用npm run dev 或 npm run build 就可以运行下面的脚本。

    "dev": "webpack-dev-server --inline --hot --compress --history-api-fallback --config webpack.dev.config.js",
    "build": "webpack --progress --hide-modules --config webpack.prod.config.js"

配置

这里分为三个：webpack.base.config.js webpack.dev.config.js webpack.prod.config.js

1. entry设置入口文件，可以设置多个，就会打包成多个，vendors是我们如果引用了vue，jQuery等，就不会把这些和代码打包到一起，会另外生成vendor.js。

   entry: {
       main: './src/index.js',
       vendors: ['vue']
   },

2. 输出目录，这里path是最后打包完的输出目录，publicPath是server上的目录，这个自行设置好路径。我们在开发模式的时候并不会输出到目录的。

3. webpack主要就是各种loader，这个可以参考我的github上的，需要解释的有两点，一是使用vue-loader时，因为需要使用postcss，所以下面需要这样写：

     vue: {
       autoprefixer: false,
       postcss: [
         nested(),
         cssnext({ browsers: ['last 2 versions', 'Android >= 2.1', 'iOS >= 7.0'] }),
         flexFallback(),
       ],
     },

   二个就是使用url-loader时，它会自动在图片后面加hash，强迫症患者表示不行，我们在开发模式下不加，生产模式下加。

   // 开发模式
   config.module.loaders.push({
    test: /\.(gif|jpg|png|jpeg|svg)\??.*$/, loader: 'url-loader?name=[name].[ext]&limit=8192'
   });

   // 生产模式
   config.module.loaders.push({
    test: /\.(gif|jpg|png|jpeg|svg)\??.*$/, loader: 'url-loader?limit=8192'
   });

4. preLoaders 就是提前处理，这里我们使用了eslint，需要检查书写规范，然后添加 .eslintrc 文件.

5. resolve，extensions就是你require的时候可以省略扩展名，alias就是别名，在require的时候直接使用别名，避免写的太长。

   resolve: {
      // 扩展，require时省略扩展名
      extensions: ['', '.js', '.vue'],
      // 别名
      alias: {
        filter: path.join(__dirname, './src/filters'),
        components: path.join(__dirname, './src/components')
      }
    }

6. 插件

   • ExtractTextPlugin 提取CSS。

   • HtmlWebpackPlugin 生产html，这个可以自己生成也可以指定模板，会将打包的js和css插入到html中，这个有好多其他参数，可自行搜索。

   • webpack.optimize.CommonsChunkPlugin 这个为了抽取前面vendor里的第三方库，打包成另外的文件。

   • webpack.optimize.UglifyJsPlugin 压缩代码。（生产模式）

   • CleanWebpackPlugin 这个是我最新发现的一个，主要是在打包到dist之前先删除以前的dist，因为加hash厚并不会覆盖。（生产模式）

7. 这里使用了ES6，所以要配置一下.babelrc。

增加项目文件

这里我只是增加了一些测试的项目文件，开发和生产都正常，如有需要可以自行添加其他目录。