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。

增加项目文件

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

    原文作者:fronter
    原文地址: https://segmentfault.com/a/1190000006236857
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞