技术

我的webpack使用

2016-11-09  本文已影响1855人  彬_仔

webpack作为模块打包机，在前端模块化开发中频繁的被使用。本篇主要记录一些我自己在学习和使用webpack中遇到问题，保存的一些比较好的博客文章和自己项目的webpack的配置文档，方便以后项目中使用时参考，不用每次都去翻老项目看webpack配置，有些第三方loader和插件的配置或者名称有时就是想不起来（看来老了呀）。

如果想学习webpack的相关内容可以从下面第一小节关于webpack的一些资源bolg中查看一些网上的教程，如果你对gulp和webpack有疑问，想了解他们的区别也可以看一下这篇Gulp和Webpack对比

关于webpack的一些资源bolg

  1. 入门Webpack，看这篇就够了
  2. Webpack 中文指南
  3. Webpack课件
  4. Webpack学习总结
  5. Webpack学习总结 另一份
  6. webpack在PC项目中的应用
  7. 图片的路径与打包
  8. webpack 教程资源收集(包括与Vue，与React，与Angular项目使用)
  9. 阮一峰老师的webpack-demos

上面这些关于webpack的资源已经可以满足你对webpack的学习了，其中每篇Bolg各有千秋，都有自己侧重点，值得好好学习。

webpack配置文件

单独使用

所谓的单独使用就是在项目开发过程中，直接通过webpack或者webpack server来使用webpack的相关功能。与之相对的是通过nodeJS来配合使用webpack，下一小节介绍。

当我单独使用webpack时，我的配置文件就一个webpack.config.js，简单配置，可根据不通项目添加loader和plugins。

var Webpack = require('webpack');
var Et = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  devtool: 'eval-source-map',//配置生成Source Maps，选择合适的选项
  entry: [ __dirname + "/src/scripts/app.js"],//唯一入口文件，可以是对象或者数组
  output: {
    path: __dirname + "/prd/",//打包后的文件存放的地方
    //filename: "[name]-[hash].js"//打包后输出文件的文件名并且版本控制，一般不用与生产环境中
    filename: "bundle.js"//打包后输出文件的文件名
  },
  module:{
    loaders:[
      {
        test:/\.css$/,
        loader:'style!css'
      },
      {
        test: /\.scss$/,
        loader: Et.extract('style','css!sass')//从js中抽离scss文件
        // loader:'style!css!sass'
      },
      {
        test:/\.js$/,
        exclude: /node_modules/,//屏蔽不需要处理的文件（文件夹）（可选）
        loader:'babel'
      },
      {
        test:/\.string$/,
        loader:'string'
      },
      // {
      //   test: /\.html$/,
      //   loader: 'html-withimg-loader'
      // },
      {
　　　　　test: /\.(png|jpg|jpeg|gif)$/,
　　　　　loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'//图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成 base64 码引用。上例中大于8192字节的图片正常打包，小于8192字节的图片以 base64 的方式引用。
　　　　}
    ]
  },
  plugins: [
    //复制文件
    new CopyWebpackPlugin([
       {
         from : './src/images',//定义要拷贝的源目录   __dirname + ‘/src/public’
         to : './images',//定义要拷贝的目标目录  __dirname + ‘/dist’
        //  toType : 'dir'//file 或者 dir , 可选，默认是文件
        //  force : 强制覆盖先前的插件 , 可选 默认false
        //  context : 不知道作用 , 可选 默认 base context 可用 specific context
        //  flatten :只拷贝文件不管文件夹 , 默认是false
        //  ignore : 忽略拷贝指定的文件 ,可以用模糊匹配
      },{
        from : './index.html',//定义要拷贝的源目录   __dirname + ‘/src/public’
      }
   ]),
    //自动打开浏览器
    new OpenBrowserPlugin({url: 'http://localhost:80/' + 'index.html'}),
    //js文件压缩
    //new Webpack.optimize.UglifyJsPlugin(),
    //从js中抽离scss文件并且版本控制
    //new Et('[name]-[hash].css')
    new Et('bundle.css'),//从js中抽离scss文件
    //html文件操作
    // new HtmlWebpackPlugin({
    //       template: './prd/index.html',
    //   })
  ]，
  devServer: {
    contentBase:  __dirname + '/prd',//本地服务器所加载的页面所在的目录
    port:8080,
    colors: true,//终端中输出结果为彩色
    //historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    hot: true//热启动
  }
}

以上配置不代表任何含义，只是一个有助于自己以后方便查找的文档而已。

通过NodeJS使用

此时需要一个另外配置server.js，通过node运行server.js来加载配置文件。

server.js

var webpack = require('webpack');
var webpackeDevServer = require('webpack-dev-server');
var config = require('./webpack.config.js');//webpack配置文件路径

new webpackeDevServer(webpack(config),{
  contentBase:  __dirname + '/prd',//本地服务器所加载的页面所在的目录
  port:80,
  colors: true,//终端中输出结果为彩色
  quiet: false, //控制台中不输出打包的信息
  historyApiFallback: true,//不跳转
  inline: true,//实时刷新
  hot: true,//热启动
  progress: true, //显示打包的进度
  lazy: false,//懒加载
  //反向代理
  proxy:{
    '/http://chping.site/*':{
      target:'http:localhost:3000',
      pathRewrite: {
        '^/http://chping.site/':''
      }
    }
  }
}).listen(80,'localhost',function(err,result){
  if(err){
    console.log(err);
  }else{
    console.log('listening at localhost:80');
  }
});

webpack.config.js

var Webpack = require('webpack');
var Et = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  devtool: 'eval-source-map',//配置生成Source Maps，选择合适的选项
  entry: [
    //react-hot配置
    'webpack-dev-server/client?http://localhost',
    'webpack/hot/only-dev-server',
        __dirname + "/src/scripts/app.js",
    ],//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/prd/",//打包后的文件存放的地方
    //filename: "[name]-[hash].js"//打包后输出文件的文件名并且版本控制
    filename: "bundle.js"//打包后输出文件的文件名
  },
  module:{
    loaders:[
      {
        test:/\.css$/,
        loader:'style!css'
      },
      {
        test: /\.scss$/,
        loader: Et.extract('style','css!sass')//从js中抽离scss文件
        // loader:'style!css!sass'
      },
      {
        test:/\.js$/,
        exclude: /node_modules/,//屏蔽不需要处理的文件（文件夹）（可选）
        loader:'babel'
      },
      {
        test:/\.string$/,
        loader:'string'
      },
      // {
      //   test: /\.html$/,
      //   loader: 'html-withimg-loader'
      // },
      {
　　　　　test: /\.(png|jpg|jpeg|gif)$/,
　　　　　loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'//图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成 base64 码引用。上例中大于8192字节的图片正常打包，小于8192字节的图片以 base64 的方式引用。
　　　　}
    ]
  },
  plugins: [
    //plugin热启动
    new Webpack.HotModuleReplacementPlugin(),
    //复制文件
    new CopyWebpackPlugin([
       {
         from : './src/images',//定义要拷贝的源目录   __dirname + ‘/src/public’
         to : './images',//定义要拷贝的目标目录  __dirname + ‘/dist’
        //  toType : 'dir'//file 或者 dir , 可选，默认是文件
        //  force : 强制覆盖先前的插件 , 可选 默认false
        //  context : 不知道作用 , 可选 默认 base context 可用 specific context
        //  flatten :只拷贝文件不管文件夹 , 默认是false
        //  ignore : 忽略拷贝指定的文件 ,可以用模糊匹配
      },{
        from : './index.html',//定义要拷贝的源目录   __dirname + ‘/src/public’
      }
   ]),
    //自动打开浏览器
    new OpenBrowserPlugin({url: 'http://localhost:80/' + 'index.html'}),
    //js文件压缩
    //new Webpack.optimize.UglifyJsPlugin(),
    //从js中抽离scss文件并且版本控制
    //new Et('[name]-[hash].css')
    new Et('bundle.css'),//从js中抽离scss文件
    //html文件操作
    // new HtmlWebpackPlugin({
    //       template: './prd/index.html',
    //   })
  ]
}

相比较单独使用的webpack配置文件，此处的webpack.config.js文件中取消了dev-server的配置，并且在入口entry中添加了部分设置和在plugins中添加了热启动的相关配置。

React中使用

React开发中使用webpack是件很美妙的事情，这里有篇文章可以了解一下深入浅出React（二）：React开发神器Webpack，热更新是个很方便使用的技能，用webpack实现其实也不难，只需要安装一个react-hot-loader，然后简单配置一下就好了。下面是webpack的相关配置：

server.js文件同上一小节总NodeJS中一致，下面是webpack.config.js的配置，重点注意入口文件配置项和plugins配置。

var webpack = require('webpack');
var ET = require('extract-text-webpack-plugin');

module.exports = {
  // 入口
  entry: [
    'webpack-dev-server/client?http://localhost',
    'webpack/hot/only-dev-server',
    __dirname + '/src/scripts/app.js'
  ],

  // 出口
  output: {
    path: __dirname + '/prd',
    // filename: '[name]-[hash].js'
    filename: 'bundle.js'
  },

  // sourcemap
  devtool: 'source-map',

  // 配置模块
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modues/,
        loader: 'babel'
      },
      {
        test: /\.jsx$/,
        exclude: /node_modues/,
        loader: 'babel'
      },
      {
        test: /\.css$/,
        loader: 'style!css'
      },
      {
        test: /\.scss$/,
        loader: ET.extract('style', 'css!sass')
      }
    ]
  },

  //plugins定义
  plugins: [
    // new webpack.optimize.UglifyJsPlugin(),
    new ET('bundle.css', {
      allChunks: true
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
}

另外除了webpack.config.js文件的配置外，在react的入口文件（或者说使用react-dom的文件中）添加三行语句：

'use strict';
import '../styles/usage/page/app.scss';

import React from 'react';
import ReactDOM from 'react-dom';

import MyButtonController from './flux/components/MyButtonController.jsx';

let app = document.getElementById('app');

ReactDOM.render(
  <MyButtonController />
  , app);

//热更新三行语句
if (module.hot) {
  module.hot.accept();
}

这样就可以开发react时使用热更新了。

常用插件和loader

css-loader: css文件加载
sass-loader: scss文件加载
less-loader: less文件加载
extract-text-webpack-plgin: css文件抽离插件

html-loader: html文件加载
html-webpack-plugin: 创建默认html文件插件

js-loader: js文件加载
string-loader: string文件加载
url-loader: 图片加载打包
vue-loader: vue文件加载
jsx-loader: jsx文件加载/js文件也可以
react-hot-loader: react热更新

open-browser-webpack-plgin: 自动打开浏览器插件
copy-webpack-plgin: 文件复制插件
webpack-dev-server: 本地server服务

更多loader请参照官方文档

小结

以后就可以不用翻老项目找配置文件了。。。

上一篇下一篇

猜你喜欢

热点阅读