webpack 近期总结

webpack 是一个前端常用的模块化打包工具，它的作用就是将 JavaScript 代码或者其他静态文件进行分析、压缩，最终合并打包成浏览器可以识别的代码。关于模块化，拿 ES6 module 来说，可以通过 export 导出，import 导入的代码块或者静态资源都可以成为模块。从入口文件开始，webpack 会通过递归的方式将应用程序所依赖的模块进行打包成一个或者多个 bundle。

webpack2 基本配置

let option = {
  entry: ‘.／index.js’,     // 来指定一个入口起点（或多个入口起点），是打包的开始文件
  output: {                      // 告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。
    path: path.resolve('./web'),  // 输出的文件路径
    filename: 'build/js/[name].bundle.js',   // 打包后的文件名称，此时的名称是入口文件的名称
  },
  module: {
    rules: [{
        test: /\.vue$/,       //识别出应该被对应的 loader 进行转换的 vue 文件。
        loader: 'vue-loader',  //转换 vue 文件，从而使其能够被添加到依赖图中（并且最终添加到 bundle 中）
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,    // 排除 node_modules ,不转译 node_modules 文件夹
        options: {
          presets: ['es2015'],
          cacheDirectory: true  //将 babel-loader 提速至少两倍。 这会将转译的结果缓存到文件系统中。loader 将使用默认的缓存目录 node_modules/.cache/babel-loader
        }
      }, 
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'  //链式loaders ,可将相关正则匹配到的文件资源数据在几个loader之间进行共享传递
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]',  
          outputPath: 'build/img/'
        }
      },
      {
        test: /\.(png|jpg|gif|svg|jpeg)$/,
        loader: 'file-loader?name=build/img/[name].[hash:6].[ext]' // 将图片命名为 基本名称 + 哈希值 + 扩展名 格式并指定到 build/img 目录下
      } 
    ]
  },
  resolve: {   //设置模块如何被解析
    extensions: ['.js', '.vue', '.css'],   //自动解析确定的扩展,能够使用户在引入模块时不带扩展名
    alias: {    // 设置模块别名,便于我们更方便通过import 或 require 引用
      'vue': 'vue/dist/vue.js'
    }
   },
    plugins: [   // webpack 插件列表
      new HtmlWebpackPlugin({template: './src/index.html'})
 ]
}
 module.exports = option

补充:

css-loader: 能够通过类似 @import 和 url（...）的方式，在 js 文件中实现通过 require 或者 import 引入 css 文件。

style-loader: 将模块的导出作为样式添加到 DOM 中，通常与 css-loader 配合使用。

file-loader: 指示webpack将所需的对象作为文件发送并返回其公用URL

url-loader : url-loader 封装了 file-loader,url-loader 提供了一个 limit 参数，小于 limit 字节的文件会被转为 DataURl，大于 limit 的还会使用 file-loader 将图片复制到指定路径。

常用插件

html-webpack-plugin

在打包的路径下自动生成一个 html 文件，并且自动引入 bundle.js 文件和 css 文件

extract-text-webpack-plugin

抽离 css 到一个指定的 css 文件中，并打包到指定的目录下

常见问题

devServer

使用webpack构建本地服务器,首先需要安装 webpack-dev-server，webpack-dev-server 是一个小型的 NodeJS Express 服务器

    devServer: {
        historyApiFallback: true,  //不跳转
        noInfo: true,    //启用 noInfo 后，诸如「启动时和每次保存之后，那些显示的 webpack 包(bundle)信息」的消息将被隐藏。错误和警告仍然会显示。
        proxy: [{       // 跨越,代理http://127.0.0.1:9000 下的/api路径
          context: ['/api'],
          target: 'http://127.0.0.1:9000',
          changeOrigin: true,  //代理服务器会在请求头中加入相应Host首部，然后目标服务器就可以根据这个首部来区别要访问的站点了
          secure: false. // 可以运行在 HTTPS 上
        }]
      }

webpack 图片的路径与打包

output.publicPath 表示资源的发布地址，当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换。

问题： vue + webpack 如果使用固定的 src 可以显示图片，但是图片路径使用变量，可以显示标题，无法显示图片？

  <div>
    <div v-for="item in pictures">
      <img :src="item.src" /> 
      <p>{{item.title}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      pictures:[
        {
          title:'标题1',
          src: '../assets/bg1.png',
        },
        {
          title:'标题2',
          src: '../assets/bg2.png'
        },
        {
          title:'标题3',
          src: '../assets/bg3.png'
        }
      ]
    }
  }
}
</script>

解决方案：

1. express 的 static 提供静态资源服务
2.  pictures:[{title:'标题1',src: require('../assets/bg1.png')}

问题：vue-cli 中解决项目打包后找不到背景图片的问题
解决方法：找到 build/util.js 文件中ExtractTextPlugin的css路径，手动添加 publicPath 参数，重新build.

    if (options.extract) {
          return ExtractTextPlugin.extract({
            use: loaders,
            publicPath: '../../',
            fallback: 'vue-style-loader'
          })
        } else {
          return ['vue-style-loader'].concat(loaders)
        }

webpack 近期总结